如何以编程方式单击选择元素并触发 onChange 处理程序？

Question

例如，使用以下代码。我尝试了几种解决方案。

 function handleChange() {
    alert('hello')
}

<select id="names" onchange="handleChange()">
    <option>Foo</option>
    <option>Bar</option>
</select>

解决方案 1。

 document.getElementById('#select').selectedIndex = 1

这会改变 select 的值和显示，但不会触发 handleChange()；

方案二

var element = document.getElementById('names');
var event = new Event('change');
element.dispatchEvent(event);

这将返回 true 但仍然不会触发 handleChange()；

---

关于如何做到这一点的任何想法？或者真的可以做到吗？解决方案只能是 javascript/html，遗憾的是没有 jQuery。

原文由 Kael Vergara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个，它对我有用……你的问题可能只是你在触发更改之前没有更改解决方案 2 的实际值：

     function handleChange() {
        alert('hello')
    }

 console.log(document.getElementById('names'));
 document.getElementById('names').selectedIndex = 1;
 document.getElementById('names').dispatchEvent(new Event('change'));

     <select id="names" onchange="handleChange()">
        <option>Foo</option>
        <option>Bar</option>
    </select>

原文由 Mosd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试这个：

  function handleChange()
 {
       alert('hello')
 }

window.onload = function()
 {

   document.getElementById('names').selectedIndex = 1;

   handleChange();
 }

   <select id="names" onchange="handleChange()>

     <option>Foo</option>
     <option>Bar</option>

    </select>

原文由 CC12 发布，翻译遵循 CC BY-SA 3.0 许可协议