清除并刷新 jQuery Chosen 下拉列表答案

【问题标题】：Clear and refresh jQuery Chosen dropdown list清除并刷新 jQuery Chosen 下拉列表
【发布时间】：2013-12-07 12:43:22
【问题描述】：

我正在尝试清除 jQuery Chosen 下拉列表并刷新它。

HTML：

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="" selected="selected"></option>
    <option value="x">remove me</option>
</select>

当我点击“刷新”按钮时，它应该变成这样：

<select data-placeholder="Select Picture..." class="chosen-select" style="width:250px;" id="picturegallery" tabindex="2">
    <option value="1">test</option>
</select>

我尝试过的：

$("#refreshgallery").click(function(){
    $('#picturegallery').empty();
    var newOption = $('<option value="1">test</option>');
    $('#picturegallery').append(newOption);
});

但我无法让它更新该下拉列表... 一些帮助？ :)

【问题讨论】：

DOM 中的代码准备好了吗？
是的（评论太短，随机文本）

标签： jquery jquery-chosen

【解决方案1】：

使用.trigger("chosen:updated");，您可以在追加后更新选项列表。

动态更新 Chosen： 如果您需要更新选择字段中的选项并希望 Chosen 获取更改，您将需要在现场触发“chosen:updated”事件。选择的意志根据更新的内容重新构建自己。

您的代码：

$("#refreshgallery").click(function(){
        $('#picturegallery').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#picturegallery').append(newOption);
        $('#picturegallery').trigger("chosen:updated");
    });

【讨论】：

是的... .html() 会破坏所选的组合。
谢谢，我正在寻找这个解决方案
你救了我的命 :)
如果这对我不起作用。试试这个： $('#picturegallery').trigger("liszt:updated");

【解决方案2】：

如果trigger("chosen:updated"); 不工作，使用@Nhan Tran 的.trigger("liszt:updated"); 工作正常。

【讨论】：

Please use Answers exclusively to answer the question。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您拥有sufficient reputation，您就可以comment on any post。同时，请不要使用答案发布 cmets。
@TimDiekmann 这个答案对我更有用，但你说他犯了一个错误。在这里，我们正在寻找与 Facebook/Instagram/任何其他社交媒体不同的帖子和评论的答案。 ca Michel => 谢谢。

【解决方案3】：

$("#idofBtn").click(function(){
        $('#idofdropdown').empty(); //remove all child nodes
        var newOption = $('<option value="1">test</option>');
        $('#idofdropdown').append(newOption);
        $('#idofdropdown').trigger("chosen:updated");
    });

【讨论】：

请花点时间描述一下这段代码是如何解决问题的。

【解决方案4】：

MVC 4：

    function Cargar_BS(bs) {
        $.getJSON('@Url.Action("GetBienServicio", "MonitoreoAdministracion")',
                        {
                            id: bs
                        },
                        function (d) {
                            $("#txtIdItem").empty().append('<option value="">-Seleccione-</option>');
                            $.each(d, function (idx, item) {
                                jQuery("<option/>").text(item.C_DescBs).attr("value", item.C_CodBs).appendTo("#txtIdItem");
                            })
                            $('#txtIdItem').trigger("chosen:updated");
                        });
    }

【讨论】：

【解决方案5】：

在我的情况下，我需要在每次更改时更新选定的值，因为当我提交表单时，它总是得到错误的值，并且我使用了多个选择的下拉菜单。不要更新单个条目，而是更改选择器以更新所有下拉列表。这可能对某人有帮助

 $(".chosen-select").chosen().change(function () {
    var item = $(this).val();
    $('.chosen-select').trigger('chosen:updated');
});

【讨论】：

【解决方案6】：

如果trigger("chosen:updated"); 不适合您。你可以试试$('#ddl').trigger('change');，就我而言，它对我有用。

【讨论】：

【解决方案7】：

你可以用这个在页面末尾重新加载，也许这个对你有帮助

<script>
  $(".chosen-select").chosen();
</script>

【讨论】：