multiple - Borrar y actualizar la lista desplegable de jQuery Chosen

jquery chosen select size

Question

Estoy intentando borrar la lista desplegable de jQuery Chosen y actualizarla.

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>

Cuando hago clic en el botón "Actualizar", debería convertirse en esto:

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

Lo que he intentado:

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

Pero no consigo actualizar esa lista desplegable ... ¿Alguna ayuda? :)

Answer 1

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

Answer 2

Si trigger("chosen:updated"); no funciona, use .trigger("liszt:updated"); De @Nhan Tran está funcionando bien.

Answer 3

Utilizando .trigger("chosen:updated"); puede actualizar la lista de opciones después de adjuntar.

Actualización de Chosen Dynamically: si necesita actualizar las opciones en su campo de selección y quiere que Chosen recoja los cambios, deberá activar el evento "elegido: actualizado" en el campo. Chosen se reconstruirá basándose en el contenido actualizado.

Tu codigo:

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

Answer 4

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