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

【问题标题】：How do I reset a jquery-chosen select option with jQuery?如何使用 jQuery 重置 jquery 选择的选择选项？
【发布时间】：2012-07-07 02:09:49
【问题描述】：

我尝试了很多东西，但似乎没有任何效果。

我正在使用 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>

任何熟悉选择并能够通过一个选项清除选择框的人？（以后会有更多的选择。

【问题讨论】：

格式正确的问题。感谢提问。
在我自己的问题中参考我的回答，它对我有用：- stackoverflow.com/questions/21191111/…

标签： jquery jquery-chosen

【解决方案1】：

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

为了通知chosenselect已经被修改，你必须触发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');

【讨论】：

这就像一个魅力。我有一种感觉，我错过了 Chosen 的一些东西。非常感谢。 :)
啊，为什么文档中没有这个（或者我只是错过了它？）谢谢。
@technomalogical - 它肯定在the documentation。只需在该页面上搜索动态更新选择。
@JosephSilber 如果您想将此更改添加到您的答案中以使所有人都了解这一点，那么看起来 Chosen 已经做出了更改，因为此更改位于顶部。 .trigger("chosen:updated");harvesthq.github.io/chosen
我认为最好这样做：.find('option').removeAttr('selected').end().trigger('chosen:updated').

【解决方案2】：

第一个选项就足够了：http://jsfiddle.net/sFCg3/

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

但您必须确保您在诸如按钮的click 或ready 或文档之类的事件上运行此程序，例如在 jsfiddle 上。

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

编辑：
现在你已经阐明了 Chosen 插件的使用，你必须调用

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

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

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

【讨论】：

第一个选项不起作用。我猜是因为选择的插件控制了。
感谢您编辑答案以使其适用。我在原始帖子中确实提到它是针对 jQuery 和 Chosen 插件的。
“还要确保选项标签上总是有一个 value 属性。如果没有，一些浏览器总是在 val() 上返回空。”为此+1！！！

【解决方案3】：

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

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

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

它将使用带有 Ajax 的新加载选择框更新选择的下拉列表。

【讨论】：

它没有设置为 0，而是选择的 0 索引，即“选择一个选项”：stackoverflow.com/questions/29653375/…

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

如果你使用chosen，一个jquery插件，那么刷新或清除下拉菜单的内容使用：

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

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

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

【讨论】：

【解决方案6】：

我用这个：

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

在 IE、Safari 和 Firefox 上测试

【讨论】：

先生，你救了我的命

【解决方案7】：

这比 find 更有效。

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

它必须与此链接上可用的所选更新 jQuery 一起使用：https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js。

我花了一整天的时间才发现jquery.min和chosen.jquery.min不一样

【讨论】：

所以托尼。您的编辑是否只是删除了我的答案中的两个单词并重新输入它们？多么棒的编辑！

【解决方案10】：

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

【讨论】：

这也不起作用。可能是因为 Chosen 插件控制了。
这无需插件即可工作。好东西。通常您希望重置为第一个选项，这就是这样做的（并且不会从下拉列表中清除默认文本）。

【解决方案11】：

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

PS：确保根据 selected.css 将“chosen-sprite.png”放在正确的位置，以便图标可见。

【讨论】：

【解决方案12】：

在 Chrome 版本 49 中

你总是需要这个代码

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

【讨论】：

【解决方案13】：

我认为您必须为选择分配一个新值，因此如果您想清除您的选择，您可能希望将其分配给具有 value = "" 的选择。我认为您可以通过将值分配给空字符串来获取它，因此 .val('')

【讨论】：

【解决方案14】：

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/

【讨论】：

【解决方案15】：

你可以试试这个重置（空）下拉

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

【讨论】：

【解决方案16】：

新的 Chosen 库不使用 liszt。我使用了以下内容：

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

【讨论】：

【解决方案17】：

如果您需要选择第一个选项，无论其值如何（有时第一个选项值不为空），请使用：

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

它将获取第一个选项的值并将其设置为选中，然后触发选择更新。所以它就像重置为列表中的第一个选项一样工作。

【讨论】：

【解决方案18】：

正是我有同样的要求。但是通过使用 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");

参考：How to reset Jquery chosen select option

【讨论】：

【解决方案19】：

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

【讨论】：

【解决方案20】：

简单的添加触发器更改如下：

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

【讨论】：

【解决方案21】：

从上述解决方案中，没有什么对我有用。这有效：

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

【讨论】：