JSFiddle

Question

JSFiddle

我在小提琴中设置了一个select，其中包含3 option s（1个空格）。当我手动从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());
    });

Answer 2

从FabrícioMatté的评论中复制一个对我有用的答案，以便其他人不会看到这篇文章，并且最初会像我一样错过解决方案。

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

See this on his Fiddle

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

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

JSFiddle

2 个答案: