如何使用
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" />
解决方法
不幸的是,您需要手动触发更改事件.而
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;
}
