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

Question

JSFiddle

我在小提琴中设置了一个select 和 3 个options（1 个空白）。当我手动从foo 切换到bar 时，change 监听器会正常触发。

现在，如果我通过 JS 使用 code posted in some answers here 重置 select，则不会为新选择的空白选项触发 change 事件，此外，如果我选择在单击 @987654334 之前选择的选项@按钮onchange事件也不会触发。

我确定select 的值正在被上面的函数改变，这可以在这个fiddle 中看到，但是select 的onchange 事件根本不会开火。

我也试过onchange、onclick、oninput 事件无济于事。现在我想知道是否应该使用 MutationObserver 或从 DOM 中删除呈现的选定元素并创建另一个，但我可能想多了。任何帮助表示赞赏。

还有：

这个答案对我帮助很大：jQuery Chosen reset

这个答案没有帮助：how to fire onchange event in chosen prototype javascript select box?

如果 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é 的 cmets 中复制了一个对我有用的答案，这样其他人就不会像我一样看到这篇文章并且一开始就错过了解决方案。

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

See this on his Fiddle

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