Question

显然，如果我有一个'select'元素，我可以使用一些基本的JS为变更添加一个事件监听器：

document.querySelector('select').addEventListener('change', function(ev){
  console.log('Changed', ev.target.value)
})

单击“选择”元素，修改值，日志触发。简单的东西。

但是我正在开发一个用于样式选择框的库 - 比如选择或 select2 而没有jQuery依赖。

在我的库中，单击样式选择框会更改实际选择框的.value：

query('select').value = newValue;

如果我让真正的选择框可见，我可以看到这是有用的。

但是，通过JS更改选择框的value不会触发select框'更改'事件。

有没有办法可以通过JS更改选择框值，并且仍然会在选择框中附加change个事件？

Answer 1

<强>的Javascript

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);
    }
}

document.querySelector('select').addEventListener('change', function (ev) {
    console.log('Changed', ev.target.value)
});

btn.onclick = function () {
    select.selectedIndex = 2;
    var obj = document.querySelector('select');
    fireEvent(obj, 'change');
}

用户来电

var yourPlugin=new CustomSelect(options);
yourPlugin.value("3");

插件功能

function value(val) {
    if (!val) return select.value;
    select.value = val;
    fireEvent(select, 'change');
}

DEMO

Answer 2

只是一个想法：更改值后自己触发事件：

var el = query('select');
el.value = newValue;
el.dispatchEvent(new Event('change'));

Answer 3

根据@Hamix的优秀答案和some advice from MDN about createEvent() being out of date，我最终选择了：

var changeEvent = new Event('change');
realSelect.dispatchEvent(changeEvent);

Here's a demo - 再次基于@Hamix的jsfiddle，所以请给他一个upvote。

如何添加更改＆＃39;风格选择的事件监听器？

3 个答案:

DEMO