清除并刷新jQuery选择下拉列表 [英] Clear and refresh jQuery Chosen dropdown list

问题描述

我正在尝试清除jQuery选择下拉列表并刷新它.

I'm trying to clear jQuery Chosen dropdown list and refresh it.

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>

当我单击刷新"按钮时，它应变为:

When I click "Refresh" button, it should turn into this:

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

但是我无法更新下拉列表... 一些帮助? :)

But I can't get it to update that dropdown list... Some help? :)

推荐答案

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

Using .trigger("chosen:updated"); you can update the options list after appending.

动态更新所选内容: 如果您需要更新选择字段中的选项并希望所选内容进行更改，您将 需要在现场触发"chosen:updated"事件.选择将 根据更新的内容重新构建自己.

Updating Chosen Dynamically: If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

您的代码:

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

这篇关于清除并刷新jQuery选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！