如何以編程方式單擊選擇元素並觸發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> 

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

對於另一個問題，一種方式如下所示
[ 使用val（）函數設置<select>的值時觸發change（）事件

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

或簡單的只是為了觸發事件

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