javascript - 当通过 JS 更改值时，jQuery Chosen 不会触发 onchange 事件

Question

JSFiddle

我在 fiddle 中设置了一个带有 3 个 option(1 个空白)的 select。当我手动从 foo 切换到 bar 时，change 监听器正常触发。

现在，如果我使用 code posted in some answers here 通过 JS 重置 select ，change 事件不会为新选择的空白选项触发，此外，如果我选择在单击 reset 按钮之前选择的选项，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());
    });