Clear and refresh jQuery Chosen dropdown list

问题

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>

What I have tried:

$(\"#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? :)

回答1:

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

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.

Your code:

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

回答2:

If trigger("chosen:updated"); not working, use .trigger("liszt:updated"); of @Nhan Tran it is working fine.

回答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:

In my case, I need to update selected value at each change because when I submit form, it always gets wrong values and I used multiple chosen drop downs. Rather than updating single entries, change selector to update all drop downs. This might help someone

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

来源：https://stackoverflow.com/questions/20148195/clear-and-refresh-jquery-chosen-dropdown-list

标签

jquery

jquery-chosen