我如何重置jQuery的jQueryselectselect选项?

我已经尝试了很多东西,似乎没有任何工作。

我正在使用jQuery和select插件。

我试过的方法是:

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。

这是select框:

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

熟悉select并能够用一个选项清除select框的人员? (将来会有更多的select。

select元素的值设置为空string正确的方法。 但是,只更新根select元素。 自定义chosen元素不知道根select已被更新。

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

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

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

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

阅读这里的文档 (find更新dynamicselect部分)。


PSselect较旧的版本使用一个稍微不同的事件:

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

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

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

但是你必须确保你正在运行这个事件,比如click一个button或者ready或者文档,就像在jsfiddle上一样。

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

编辑:
现在你已经澄清了使用Chosen插件,你必须打电话

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

改变它的值后更新界面。

http://harvesthq.github.com/chosen/

尝试使用最新select的JS重新加载更新的select框。

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

http://harvesthq.github.io/chosen/

它将更新选定的下拉菜单与新的加载select框与Ajax。

尝试这个:

 $("#autoship_option option[selected]").removeAttr("selected"); 

我使用这个:

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

在IE,Safari和Firefox上testing

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

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

它必须使用在这个链接提供select更新的jQuery: https : //raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js 。

我花了整整一天的时间去了解jquery.minchosen.jquery.min

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

这比find更有效。

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

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

PS:确保你已经select了“sprite.png”在正确的地方按照所select的css,以便图标可见。

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

使用上面的configuration,并应用class='chosen-select-deselect'手动取消select并将值设置为空

或者如果你想在所有的组合中取消select选项,然后像下面应用configuration

 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)

我认为你必须为select分配一个新的值,所以如果你想清除你的select,你可能要分配给值=“”。 我认为你可以通过赋值给空string来获得它,所以.val('')

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> 

JS:

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

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

你可以尝试这个重置(空)下拉

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

新选出的图书馆不使用liszt。 我使用了以下内容:

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

如果你需要有第一个选项,不pipe它的值是什么(有时候第一个选项的值不是空的),使用这个:

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

它会得到第一个选项的值,并将其设置为选中,然后在select时触发更新。 所以它就像重置到列表中的第一个选项一样工作。

确实我有相同的要求。 但通过设置简单的空string与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"); 

参考: 如何重置Jqueryselect的select选项

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

简单的添加触发器如下所示:

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