使用JavaScript更改选项并触发事件

如何使用 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/

解决方法

不幸的是,您需要手动触发更改事件.而 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构造函数.所以您可能需要使用以下方式进行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;
}

使用JavaScript更改选项并触发事件

解决方法

猜你在找的JavaScript相关文章