清除并刷新jQueryselect下拉列表

我试图清除jQueryselect下拉列表并刷新它。

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> 

当我点击“刷新”button,它应该变成这样:

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

但我不能得到它来更新下拉列表…一些帮助? 🙂

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

更新dynamicselect: 如果您需要更新select字段中的选项,并希望select选取更改,则需要在该字段上触发“select:更新”事件。 select将根据更新的内容重新构build自己。

你的代码:

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

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