改變<select>的選項並使用 JavaScript 觸發事件

Question

如何使用 JavaScript（沒有任何庫，如 jQuery）更改 HTML <select>的選項，同時觸發與用戶進行更改相同的事件？

例如，使用以下代碼，如果我用鼠標更改選項，則會觸發一個事件（即運行onchange ）。 但是，當我使用 JavaScript 更改選項時，它不會觸發任何事件。 當使用 JavaScript 選擇一個選項時，是否可以觸發相關的事件處理程序，如onclick 、 onchange等？

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true;' value="Change option to 2" />

http://jsfiddle.net/xwywvd1a/

Answer 1

不幸的是，您需要手動觸發change事件。 使用事件構造函數將是最好的解決方案。

 var select = document.querySelector('#sel'), input = document.querySelector('input[type="button"]'); select.addEventListener('change',function(){ alert('changed'); }); input.addEventListener('click',function(){ select.value = 2; select.dispatchEvent(new Event('change')); });

 <select id="sel" onchange='alert("changed")'> <option value='1'>One</option> <option value='2'>Two</option> <option value='3' selected>Three</option> </select> <input type="button" value="Change option to 2" />

當然，IE 不支持Event構造函數。 所以你可能需要用這個 polyfill：

function Event( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}

Answer 2

我的解決方案的小提琴在這里。 但以防萬一它過期，我也會粘貼代碼。

HTML：

<select id="sel">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" id="button" value="Change option to 2" />

JS：

var sel = document.getElementById('sel'),
    button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;

    // firing the event properly according to StackOverflow
    // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        sel.dispatchEvent(evt);
    }
    else {
        sel.fireEvent("onchange");
    }
});

sel.addEventListener('change', function (e) {
    alert('changed');
});

Answer 3

就這么簡單：

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    sel.onchange();
});

但是這種方式有問題。 您不能像使用普通函數那樣調用事件，因為可能有多個函數在偵聽一個事件，並且可以通過幾種不同的方式設置它們。

不幸的是，觸發事件的“正確方法”並不那么容易，因為您必須在 Internet Explorer（使用 document.createEventObject）和 Firefox（使用 document.createEvent("HTMLEvents")）中以不同的方式執行此操作

var sel = document.getElementById('sel');
var button = document.getElementById('button');

button.addEventListener('click', function (e) {
    sel.options[1].selected = true;
    fireEvent(sel,'change');

});


function fireEvent(element,event){
    if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
    }
    else{
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
    }
}

Answer 4

試試這個：

<select id="sel">
 <option value='1'>One</option>
  <option value='2'>Two</option> 
  <option value='3'>Three</option> 
  </select> 


  <input type="button" value="Change option to 2"  onclick="changeOpt()"/>

  <script>

  function changeOpt(){
  document.getElementById("sel").options[1].selected = true;

alert("changed")
  }

  </script>

Answer 5

整個創建和調度事件都可以工作，但是由於您使用了onchange屬性，您的生活可以簡單一點：

http://jsfiddle.net/xwywvd1a/3/

var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();

如果您使用瀏覽器的事件 API（addEventListener、IE 的 AttachEvent 等），那么您將需要創建和調度事件，正如其他人已經指出的那樣。

Answer 6

您可以在更改 onclick 事件上的選定選項后手動觸發事件： document.getElementById("sel").onchange();

Answer 7

這些問題可能與您的要求有關：

• 如何手動觸發 onchange 事件？

• 如何在使用 javascript 更改的輸入字段中觸發事件

這是我的想法：您可以像這樣在 onclick 事件中堆疊多個調用：

<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
</select>
<input type="button" onclick='document.getElementById("sel").options[1].selected = true; alert("changed");' value="Change option to 2" />

您也可以調用函數來執行此操作。

如果你真的想調用一個函數並且兩者都以相同的方式運行，我認為這樣的事情應該可行。 它並沒有真正遵循“函數應該做一件事並做好”的最佳實踐，但它確實允許您調用一個函數來處理更改下拉列表的兩種方式。 基本上我在 onchange 事件上傳遞 (value) 並在 onclick 事件上傳遞 (null, index of option)。

這是代碼筆： http ://codepen.io/mmaynar1/pen/ZYJaaj

<select id="sel" onchange='doThisOnChange(this.value)'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<input type="button" onclick='doThisOnChange(null,1);' value="Change option to 2"/>

<script>
doThisOnChange = function( value, optionIndex)
{
    if ( optionIndex != null )
    {
       var option = document.getElementById( "sel" ).options[optionIndex];
       option.selected = true;
       value = option.value;
    }
    alert( "Do something with the value: " + value );
}
</script>

Answer 8

html 使用剃刀：

 @Html.DropDownList("test1", Model.SelectOptionList, new { id = "test1", onchange = "myFunction()" })

JS代碼：

function myFunction() {

            var value = document.getElementById('test1').value;

            console.log("it has been changed! to " + value );
        }