如何以编程方式单击“选择”元素并触发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（）;。

解决方案2

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

这返回true，但仍然不会触发handleChange（）;。

---

有关如何执行此操作的任何想法？还是可以实际完成？解决方案必须仅是javascript / html，而遗憾的是没有jQuery。

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>