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

Question

如何<select>使用JavaScript 更改HTML 的选项(没有像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

我解决方案的小提琴就在这里.但是为了防止它过期我也会粘贴代码.

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 等），那么您将需要创建和分派事件，正如其他人已经指出的那样。