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的实际价值：

＆＃13;

    function handleChange() {
        alert('hello')
    }


 console.log(document.getElementById('names'));
 document.getElementById('names').selectedIndex = 1;
 document.getElementById('names').dispatchEvent(new Event('change'));

＆＃13;

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

＆＃13;

Answer 2

奇怪的@KaelVergara，我复制了你的代码，它正在为我工作

<script>
function handleChange123() {
    alert('hello')
}
</script>

<select id="names123" onchange="handleChange123()">
    <option>Foo</option>
    <option>Bar</option>
</select>

<script>
var element = document.getElementById('names123');
var event = new Event('change');
element.dispatchEvent(event);
</script>

Answer 3

尝试这个：

 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>

Answer 4

一种方法如下所示，这里是另一个问题的答案
[Trigger change() event when setting <select>'s value with val() function

 $('#selectField').val(10).change();

或简单触发事件

 $('#selectField').change();

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

4 个答案: