Очистить и обновить выпадающий список JQuery Chosen

Я пытаюсь удалить раскрывающийся список 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);
});

Но я не могу заставить его обновить этот раскрывающийся список... Некоторая помощь?:)

Ответ 1

Используя .trigger("chosen:updated");, вы можете обновить список опций после добавления.

Динамическое изменение:. Если вам нужно обновить параметры в поле выбора и хотите, чтобы Chosen забирал изменения, вы необходимо вызвать событие "выбранное: обновленное" на поле. Выбранный будет перестроить себя на основе обновленного контента.

Ваш код:

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

Ответ 2

Если trigger("chosen:updated"); не работает, используйте .trigger("liszt:updated"); @Nhan Tran, он работает нормально.

Ответ 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');
});