JSFiddle

I've set up a select with 3 options (1 blank) in the fiddle. When I switch from foo to bar manually, the change listener fires normally.

我在小提琴中设置了一个带有3个选项（1个空白）的选项。当我手动从foo切换到bar时，更改侦听器会正常触发。

Now if I reset the select through JS with the code posted in some answers here, the change event does not fire for the newly selected blank option, furthermore, if I select the option which was selected before clicking in the reset button the onchange event won't fire either.

现在，如果我通过JS重置选择通过JS在这里的一些答案中发布的代码，更改事件不会触发新选择的空白选项，此外，如果我选择在单击重置按钮之前选择的选项，则onchange事件赢了也不会开火。

I'm sure the select's value is being changed with the function above, which can be seen in this fiddle, but the select's onchange event simply doesn't fire.

我确定选择的值正在使用上面的函数进行更改，这可以在这个小提琴中看到，但是select的onchange事件根本不会触发。

I've also tried onchange, onclick, oninput events to no avail. Right now I'm wondering if I should use a MutationObserver or remove the rendered chosen element from the DOM and create another, but I'm probably overthinking it. Any help is appreciated.

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

Also:

也：

This answer helped me a lot: jQuery Chosen reset

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

This answer didn't help: how to fire onchange event in chosen prototype javascript select box?

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

Code for future reference if jsfiddle.net is taken down:

如果jsfiddle.net被删除，将来参考的代码：

HTML

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>

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

2 个解决方案

#1

You need to trigger the change after you change the value with $(selector).trigger("change")

使用$（selector）.trigger（“更改”）更改值后，需要触发更改

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

#2

Copying an answer out of the comments by Fabrício Matté that worked for me so others don't see this post and miss a solution at first like I did.

在FabrícioMatté的评论中复制了一个对我有用的答案，所以其他人没有看到这篇文章，并且像我一样错过了解决方案。

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

See this on his Fiddle

在他的小提琴上看到这个

I originally tried to continue using the .trigger('liszt:updated') call instead of the .change() but that did not work. Didn't see the reasoning behind .removeClass('chzn-done') either but this is also essential or your select box will vanish.

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

#1