如何<select>使用 JavaScript（没有任何库，如 jQuery）更改 HTML的选项，同时触发与用户进行更改相同的事件？
例如，使用以下代码，如果我用鼠标更改选项，则会触发事件（即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" />
不幸的是，您需要手动触发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" />而且，当然，Event构造函数在 IE 中不受支持。所以你可能需要用这个 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;
}
我的解决方案的小提琴在这里。但以防万一它过期，我也会粘贴代码。
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');
});
就这么简单：
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);
}
}
试试这个：
<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>
整个创建和调度事件都有效，但是由于您使用了该onchange属性，您的生活可以简单一点：
http://jsfiddle.net/xwywvd1a/3/
var selEl = document.getElementById("sel");
selEl.options[1].selected = true;
selEl.onchange();
如果您使用浏览器的事件 API（addEventListener、IE 的 AttachEvent 等），那么您将需要创建和调度事件，正如其他人已经指出的那样。