77

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

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

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

4

21 回答 21

181

将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');

阅读此处的文档（找到标题为动态更新选择的部分）。

PS旧版本的 Chosen 使用稍微不同的事件：

$('#autoship_option').val('').trigger('liszt:updated');
于 2012-07-06T15:38:30.007 回答
13

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

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

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

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

编辑：
既然您已经阐明了 Chosen 插件的使用，您必须调用

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

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

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

于 2012-07-06T15:35:14.617 回答
8

试试这个以使用最新选择的 JS 重新加载更新的选择框。

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

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

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

于 2013-08-12T06:24:17.757 回答
5

试试这个：

$("#autoship_option option[selected]").removeAttr("selected");
于 2012-07-06T15:37:54.367 回答
5

如果您使用chosen的是 jquery 插件，那么要刷新或清除下拉菜单的内容，请使用：

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

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

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

于 2018-11-01T12:53:16.587 回答
4

我用这个：

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

在 IE、Safari 和 Firefox 上测试

于 2014-05-12T15:20:41.617 回答
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

于 2013-03-21T13:32:15.393 回答
2

这比 find 更有效。

$('select').children('option').first().prop('selected', true)
$('select').trigger("chosen:updated");
于 2014-12-18T21:34:01.170 回答
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]);
}
于 2015-07-24T03:35:44.010 回答
1 
jQuery("#autoship_option option:first").attr('selected', true);
于 2012-07-06T15:36:32.860 回答
1

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

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

于 2015-03-27T11:55:34.170 回答
1

在 Chrome 版本 49 中

你总是需要这个代码

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

于 2015-12-22T17:26:26.487 回答
0

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

于 2012-07-06T15:35:22.880 回答
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');
});

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

于 2014-02-22T01:52:28.400 回答
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");
        });
于 2014-11-13T10:17:33.310 回答
0

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

document.getElementById('autoship_option').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");
于 2015-03-17T01:37:04.137 回答
0

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

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

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

于 2015-05-14T17:57:58.630 回答
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");

参考：如何重置 Jquery 选择的选择选项

于 2015-05-23T18:38:38.393 回答
0 
jQuery('.chosen-processed').find('.search-choice-close').click();
于 2016-01-18T07:45:20.453 回答
0

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

$('#selectId').val('').trigger('change');
于 2017-05-22T03:18:24.223 回答
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");
        }
      });
     }
于 2019-07-03T12:03:44.987 回答