如何使用 jQuery 重置 jquery 选择的选择选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11365212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I reset a jquery-chosen select option with jQuery?
提问by James Wilson
I have tried numerous things and nothing seems to be working.
我尝试了很多东西，但似乎没有任何效果。
I am using jQuery and Chosen plugin.
我正在使用 jQuery 和 Chosen 插件。
Methods I have tried:
我尝试过的方法：
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);
It always shows the Active Autoship option once it has been selected. I can't seem to get it to clear the selection.
一旦被选中，它总是会显示 Active Autoship 选项。我似乎无法清除选择。
Here is the select box:
这是选择框：
<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>
Anyone familiar with Chosen and being able to clear a select box with one option? (It will have more options in the future.
任何熟悉选择并能够使用一个选项清除选择框的人吗？（以后会有更多选择。
回答by Joseph Silber
Setting the selectelement's value to an empty string isthe correct way to do it. However, that only updates the root selectelement. The custom chosenelement has no idea that the root selecthas been updated.
将select元素的值设置为空字符串是正确的做法。但是，这只会更新根select元素。自定义chosen元素不知道根select已更新。
In order to notify chosenthat the selecthas been modified, you have to trigger chosen:updated:
为了通知chosen了select已被修改，你必须触发chosen:updated：
$('#autoship_option').val('').trigger('chosen:updated');
or, if you're not sure that the first option is an empty string, use this:
或者，如果您不确定第一个选项是否为空字符串，请使用以下命令：
$('#autoship_option')
.find('option:first-child').prop('selected', true)
.end().trigger('chosen:updated');
Read the documentation here(find the section titled Updating Chosen Dynamically).
阅读此处的文档（找到标题为“动态更新选择”的部分）。
P.S.Older versions of Chosen use a slightly different event:
PS旧版本的 Chosen 使用稍微不同的事件：
$('#autoship_option').val('').trigger('liszt:updated');
回答by Ricardo Souza
The first option should sufice: http://jsfiddle.net/sFCg3/
第一个选项应该足够了：http: //jsfiddle.net/sFCg3/
jQuery('#autoship_option').val('');
But you have to make sure you are runing this on an event like clickof a button or readyor document, like on the jsfiddle.
但是你必须确保你在click按钮ready或文档之类的事件上运行它，比如在 jsfiddle 上。
Also make sure that theres always a value attribute on the option tags. If not, some browsers always return empty on val().
还要确保选项标签上总是有一个 value 属性。如果没有，某些浏览器总是在 上返回空val()。
Edit:
Now that you have clarifyed the use of the Chosen plugin, you have to call
编辑：
既然您已经阐明了 Chosen 插件的使用，您必须调用
$("#autoship_option").trigger("liszt:updated");
after changing the value for it to update the intereface.
更改其值以更新界面后。
回答by Rakesh
Try this to reload updated Select box with Latest Chosen JS.
尝试使用最新选择的 JS 重新加载更新的选择框。
$("#form_field").trigger("chosen:updated");
http://harvesthq.github.io/chosen/
http://harvesthq.github.io/chosen/
It will Updated chosen drop-down with new loaded select box with Ajax.
它将使用带有 Ajax 的新加载的选择框更新选择的下拉列表。
回答by priyanka yadav
If you are using chosen, a jquery plugin, then to refresh or clear the content of the dropdown use:
如果您使用的chosen是 jquery 插件，则要刷新或清除下拉列表的内容，请使用：
$('#dropdown_id').empty().append($('< option>'))
dropdown_id.chosen().trigger("chosen:updated")
chosen:updatedevent will re-builditself based on the updated content.
chosen:updated事件re-build本身将基于更新的内容。
回答by Antonio Beamud
Try this:
尝试这个：
$("#autoship_option option[selected]").removeAttr("selected");
回答by jrg
I use this:
我用这个：
$('idSelect').val([]);
$('idSelect').val([]);
tested on IE, Safari & Firefox
在 IE、Safari 和 Firefox 上测试
回答by Philip
This is more effective than find.
这比查找更有效。
$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
回答by NIrav Modi
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]);
}
Use above config and apply class='chosen-select-deselect'for manually deselect and set the value empty
使用上面的配置并申请class='chosen-select-deselect'手动取消选择并将值设置为空
or if you want deselect option in all combo then apply config like below
或者，如果您想在所有组合中取消选择选项，则应用如下配置
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]);
}
回答by Kareem
$('#autoship_option').val('').trigger('liszt:updated');
and set the default option value to ''.
并将默认选项值设置为''.
It has to be used with chosen updated jQuery available at this link: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js.
它必须与此链接中可用的所选更新 jQuery 一起使用：https: //raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js。
I spent one full day to find out at the end that jquery.minis different from chosen.jquery.min
我花了一整天的时间才发现最终jquery.min与chosen.jquery.min
回答by mafafu
jQuery("#autoship_option option:first").attr('selected', true);
