Question

如何使用JavaScript更改HTML <select>选项（没有像jQuery这样的库），同时触发与用户进行更改相同的事件？

例如，使用以下代码，如果我用鼠标更改选项，则会触发事件（即运行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事件。 Event Contructor将是最佳解决方案。

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构造函数。所以你可能需要用这个填充：

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

我的解决方案的小提示是here。但是，如果它过期我也会粘贴代码。

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

整个创建和调度事件都有效，但由于您使用的是onchange属性，因此您的生活可以更简单一些：

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

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

如果您使用浏览器的事件API（addEventListener，IE的AttachEvent等），那么您将需要创建和分派事件，正如其他人已经指出的那样。

Answer 5

试试这个：

<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 6

这些问题可能与您要求的内容相关：

以下是我的想法：您可以在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事件上传递（值）和onclick事件的（null，index of option）。

以下是codepen：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 7

您可以在更改onclick事件上的所选选项后手动触发事件：document.getElementById("sel").onchange();

Answer 8

使用Razor的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 );
        }

更改<select>的选项并使用JavaScript </select>触发事件

8 个答案: