如何使用 jQuery 重置 jQuery 选择的选择选项？

我已经尝试了很多方法，但似乎都不管用。

我正在使用 jQuery 和 Chosen 插件。

我试过的方法:

var select = jQuery('#autoship_option');


select.val(jQuery('options:first', select).val());


jQuery('#autoship_option').val('');


jQuery('#autoship_option').text('');


jQuery('#autoship_option').empty('');


jQuery("#autoship_option option[value='']").attr('selected', true);

一旦选中“活动自动驾驶”选项，它总是显示该选项。我似乎不能让它通过选择。

下面是选择框:

<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>

有人熟悉“选择”并能够清除一个选择框中的一个选项吗？(未来将有更多选择。

177118 次浏览
小开

第一个选项应该足够了: http://jsfiddle.net/sFCg3/

jQuery('#autoship_option').val('');

但是您必须确保您正在一个事件上运行它，比如按钮的 click、 ready或文档，比如 jsfiddle。

还要确保在选项标记上始终有一个 value 属性。如果没有，一些浏览器在 val()上总是返回空的。

编辑:
既然您已经说明了 Chosen 插件的用法，那么您必须调用

$("#autoship_option").trigger("liszt:updated");

在更改它的值以更新接口之后。

Http://harvesthq.github.com/chosen/

小开

我认为您必须为 select 赋予一个新值，所以如果您想清除您的选择，您可能希望将其赋予具有 value = “”的值。我认为您可以通过将值赋给空字符串来得到它，因此。Val (”)

小开 
jQuery("#autoship_option option:first").attr('selected', true);
小开

试试这个:

$("#autoship_option option[selected]").removeAttr("selected");
小开
最佳答案

将 select元素的值设置为空字符串 是的正确方法。但是，这仅更新根 select元素。定制的 chosen元素不知道根 select已经更新。

为了通知 chosen select已经被修改，你必须触发 chosen:updated:

$('#autoship_option').val('').trigger('chosen:updated');

或者，如果您不确定第一个选项是否为空字符串，请使用以下命令:

$('#autoship_option')
.find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');

阅读 这里的文件(查找标题为 动态更新选择的部分)。

老版本的《选择》使用了稍微不同的事件:

$('#autoship_option').val('').trigger('liszt:updated');
小开 
$('#autoship_option').val('').trigger('liszt:updated');

并将默认选项值设置为 ''。

它必须与选定的更新后的 jQuery 一起使用，可在以下链接中找到: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js。

我花了整整一天的时间，最后才发现 jquery.min和 chosen.jquery.min是不同的

小开

尝试使用最新选择的 JS 重新加载已更新的选择框。

$("#form_field").trigger("chosen:updated");

Http://harvesthq.github.io/chosen/

它将使用新加载的 Ajax 选择框更新所选择的下拉菜单。

小开

HTML:

<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>
<button id="rs">Click to reset</button>

约翰逊:

$('#rs').on('click', function(){
$('autoship_option').find('option:selected').removeAttr('selected');
});

小提琴: http://jsfiddle.net/Z8nE8/

小开

我用这个:

$('idSelect').val([]);

在 IE，Safari 和 Firefox 上测试

小开

您可以尝试重置(空)下拉菜单

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

这比找到更有效。

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
小开

新的 Chosen 库没有使用 list:

document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
小开

我不确定这是否适用于旧版本的选择，但现在在当前版本(v1.4.1) ，他们有一个选项 $('#autoship_option').chosen({ allow_single_deselect:true });这将添加一个’x’图标旁边的名称选择。使用“ x”清除“ select”字段。

PS: 确保您在正确的位置按 chosen.css 选择了‘ select-sprite.png’，这样图标就可以看到了。

小开

如果你需要选择第一个选项，不管它的值是多少(有时候第一个选项的值不是空的) ，使用以下方法:

$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");

它将获得第一个选项的值，并将其设置为选中，然后触发更新的选择。所以它的工作原理类似于重置为列表中的第一个选项。

小开

没错，我也有同样的要求。但是通过简单地使用 jquery 设置空字符串来重置下拉列表是不会起作用的。您还应该触发更新。

Html:
<select class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>


Jquery:
$('.chosen-control').val('').trigger('liszt:updated');

有时基于您正在使用的所选控件的版本，您可能需要使用以下语法。

$('.chosen-control').val('').trigger("chosen:updated");

参考资料: 如何重置 Jquery 选择的选择选项

小开 
var config = {
'.chosen-select'           : {},
'.chosen-select-deselect'  : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}

使用以上配置并应用 class='chosen-select-deselect'手动取消选择并将值设置为空

或者如果你想在所有组合中取消选择选项，然后应用如下配置

var config = {
'.chosen-select'           : {allow_single_deselect:true},//Remove if you do not need X button in combo
'.chosen-select-deselect'  : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width'     : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
小开

在 Chrome 版本49中

你总是需要这个代码

$("select option:first").prop('selected', true)

小开 
jQuery('.chosen-processed').find('.search-choice-close').click();
小开

像这样简单的添加触发器更改:

$('#selectId').val('').trigger('change');
小开

如果您使用的是 chosen，一个 jquery 插件，那么刷新或清除下拉列表中的内容时可以使用:

$('#dropdown_id').empty().append($('< option>'))


dropdown_id.chosen().trigger("chosen:updated")

chosen:updated事件将根据 re-build本身更新的内容。

小开

从上面的解决方案来看，没有一个对我有用。这个有用:

$('#client_filter').html(' '); //this worked

为什么

$.ajax({
type: 'POST',
url: xyz_ajax,
dataType: "json",
data : { csrfmiddlewaretoken: csrftoken,
instancess : selected_instances },
success: function(response) {
//clear the client DD
$('#client_filter').val('').trigger('change') ; //not working
$('#client_filter').val('').trigger('chosen:updated') ; //not working
$('#client_filter').val('').trigger('liszt:updated') ; //not working
$('#client_filter').html(' '); //this worked
jQuery.each(response, function(index, item) {
$('#client_filter').append('<option value="'+item.id+'">' + item.text + '</option>');
});
$('#client_filter').trigger("chosen:updated");
}
});
}
小开

如果您知道下拉索引键，您可以尝试从下拉动态添加

$('select').find('option:nth-child(5)')
.prop('selected', true).end()
.trigger('chosen:updated');

提交答案