我尝试了很多东西，似乎没有任何工作。
我正在使用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);
一旦选择了Active Autoship选项，它就会始终显示。我似乎无法清除选择。
这是选择框：
<select id="autoship_option" data-placeholder="Choose Option..."
style="width: 175px;" class="chzn-select">
<option value=""></option>
<option value="active">Active Autoship</option>
</select>
任何熟悉选择并能够通过一个选项清除选择框的人？ （将来会有更多的选择。
答案 0 :(得分：160)
将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');
阅读the documentation here（找到标题为动态更新动态的部分）。
P.S。旧版Chosen使用稍微不同的事件：
$('#autoship_option').val('').trigger('liszt:updated');
答案 1 :(得分：12)
第一个选项应该是：http://jsfiddle.net/sFCg3/
jQuery('#autoship_option').val('');
但是你必须确保在按钮的click或ready或文件之类的事件上运行此操作，就像在jsfiddle上一样。
还要确保theres始终是选项标记的值属性。如果没有，某些浏览器总是在val()上返回空。
修改
现在您已经阐明了Chosen插件的使用，您必须调用
$("#autoship_option").trigger("liszt:updated");
更改其值后更新界面。
答案 2 :(得分：8)
尝试使用Latest Chosen JS重新加载更新的选择框。
$("#form_field").trigger("chosen:updated");
http://harvesthq.github.io/chosen/
它将使用Ajax新加载的选择框更新所选下拉列表。
答案 3 :(得分：4)
试试这个：
$("#autoship_option option[selected]").removeAttr("selected");
答案 4 :(得分：3)
我用这个：
$('idSelect').val([]);
在IE，Safari＆amp;火狐
答案 5 :(得分：2)
$('#autoship_option').val('').trigger('liszt:updated');
并将默认选项值设置为''。
必须在此链接上使用选定的更新jQuery：https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js。
我花了整整一天的时间才发现jquery.min与chosen.jquery.min不同
答案 6 :(得分：2)
这比查找更有效。
$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
答案 7 :(得分：2)
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]);
}
答案 8 :(得分：1)
jQuery("#autoship_option option:first").attr('selected', true);
答案 9 :(得分：1)
我不确定这是否适用于所选的旧版本，但现在在当前版本（v1.4.1）中，他们有一个选项$('#autoship_option').chosen({ allow_single_deselect:true });这将添加一个＆＃39; x＆＃39;所选名称旁边的图标。使用＆＃39; x＆＃39;清除＆＃39;选择＆＃39;费尔德。
PS：确保你已经选择了-sprite.png＆＃39;根据selected.css在正确的位置，以便图标可见。
答案 10 :(得分：1)
Chrome版本49
您需要始终使用此代码
$("select option:first").prop('selected', true)
答案 11 :(得分：0)
从上述解决方案中，什么都没有为我工作。可行：
$('#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");
}
});
}
答案 12 :(得分：0)
如果您使用的是chosen（一个jQuery插件），则使用以下命令刷新或清除下拉菜单的内容：
$('#dropdown_id').empty().append($('< option>'))
dropdown_id.chosen().trigger("chosen:updated")
chosen:updated事件将根据更新的内容re-build本身。
答案 13 :(得分：0)
简单地添加触发器更改如下：
$('#selectId').val('').trigger('change');
答案 14 :(得分：0)
jQuery('.chosen-processed').find('.search-choice-close').click();
答案 15 :(得分：0)
我确实有同样的要求。但是通过使用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");
答案 16 :(得分：0)
如果你需要选择第一个选项而不管它的值（有时第一个选项值不为空），请使用：
$('#autoship_option').val($('#autoship_option option:first-child').val()).trigger("liszt:updated");
它将获得第一个选项的值并将其设置为选中，然后在选择时触发更新。所以它就像重置列表中的第一个选项一样。
答案 17 :(得分：0)
新的Chosen库不使用liszt。我使用了以下内容：
document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
答案 18 :(得分：0)
您可以尝试此操作来重置（清空）下拉列表
$("#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");
});
答案 19 :(得分：0)
<强> 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');
});
答案 20 :(得分：0)
我认为您必须为选择分配一个新值，因此如果您想清除您的选择，您可能希望将其分配给具有值=＆＃34;＆＃34;的那个。我认为你可以通过将值分配给空字符串来获得它，所以.val（＆＃39;＆＃39;）