清除和刷新 jQuery 选择的下拉列表

我正在尝试清除 jQuery 选择的下拉列表并刷新它。

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

但我无法让它更新下拉列表。 要帮忙吗

230465 次浏览
小开
最佳答案

使用 强 > .trigger("chosen:updated");强，可以在附加。

动态更新选择: < em > 如果您需要更新您的选择字段中的选项并希望“选择”选择更改，您将 需要触发字段上的“选择: 更新”事件。选择将 根据更新的内容重新构建自身

你的代码:

$("#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");
});
小开

如果 trigger("chosen:updated");不工作，使用@Nhan Tran 的 .trigger("liszt:updated");，它工作正常。

小开

在我的例子中，我需要在每次更改时更新选定的值，因为当我提交表单时，它总是得到错误的值，并且我使用了多个选定的下拉列表。 更改选择器以更新所有下拉列表，而不是更新单个条目。 这也许能帮到某人

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

如果 trigger("chosen:updated");对你不起作用，你可以试试 $('#ddl').trigger('change');，因为在我的案例中它对我起作用。

小开

你可以用这个在页面末尾重新加载，也许这个可以帮助你

<script>
$(".chosen-select").chosen();
</script>

提交答案