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