当通过JS更改值时,jQuery选择不触发onchange事件

Question

的jsfiddle

我在小提琴中设置了select3 option秒(1个空白).当我从手动切换foo到bar手动时,change监听器会正常触发.

现在,如果我select使用在此处的某些答案中发布的代码重置直通JS ,则change事件不会针对新选择的空白选项触发,此外,如果我选择在单击reset按钮之前选择的选项,则onchange事件将不会触发.

我敢肯定select的价值是被上面的功能,都可以在此看到改变小提琴,但select的onchange事件根本不火.

我也试过onchange,onclick,oninput事件无济于事.现在我想知道我是否应该使用MutationObserver或从DOM中删除渲染的选定元素并创建另一个,但我可能会过度思考它.任何帮助表示赞赏.

也:

这个答案对我有很大帮助:jQuery Chosen重置

这个答案没有帮助:如何在选择的原型javascript选择框中触发onchange事件？

如果jsfiddle.net被删除,将来参考的代码:

HTML

<div id="wrapper">
    <select id="chosen">
        <option value="!!EMPTY VALUE!!"></option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
</div>
<br>
<button id="reset">Reset</button>

JS

$(function() {
    $('#chosen').chosen();

    $('#wrapper').on('change', '#chosen', function() {
        console.log('onchange: ' + this.value);
    });

    $('#reset').click(function() {
        $("#chosen").val('').trigger("liszt:updated"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
        console.log('reset: ' + $('option:selected').val());
    });
});

Answer 1

您需要在更改值后触发更改 $(selector).trigger("change")

$('#reset').click(function() {
        $("#chosen").val('').trigger("change"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated");
        console.log('reset: ' + $('option:selected').val());
    });

Answer 2

从对我有用的 Fabrício Matté 的评论中复制一个答案，这样其他人就不会看到这篇文章，也不会像我一样一开始就错过了一个解决方案。

$('#chosen_chzn').remove();
$('#chosen').val('').change().removeClass('chzn-done').chosen();

在他的小提琴上看到这个

我最初尝试继续使用.trigger('liszt:updated')呼叫而不是 ，.change()但这没有用。也没有看到背后的原因.removeClass('chzn-done')，但这也是必不可少的，否则您的选择框将消失。