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

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

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

选择后，它始终显示“活动自动装载”选项。我似乎无法清除选择。

这是选择框：

<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元素。自定义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选择的旧版本使用的事件稍有不同：

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

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

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

但是您必须确保要在诸如click按钮或ready在jsfiddle之或文档之类代码。

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

编辑：
现在您已经澄清了选择的插件的使用，您必须调用

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

更改其值以更新接口之后。

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

尝试此操作以使用“最新选择的JS”重新加载更新的“选择”框。

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

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

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

如果使用chosenjQuery插件，请使用以下命令刷新或清除下拉菜单的内容：

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

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

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

尝试这个：

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

我用这个：

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

在IE，Safari和Firefox上进行了测试

这比查找更有效。

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

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

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

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

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

我花了整整一天的时间来找出jquery.min与chosen.jquery.min

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

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

PS：请确保按照selected.css在正确的位置放置了“ chosen-sprite.png”，以便显示图标。

在Chrome版本49中

你总是需要这个代码

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

我认为您必须为选择分配一个新值，因此，如果您想清除选择，则可能希望将其分配给值=“”的选择。我认为您可以通过将值分配给空字符串来获取它.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");

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

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

它将获取第一个选项的值并将其设置为选中状态，然后触发选择的更新。因此，它的工作方式类似于重置为列表中的第一个选项。

确实我有相同的要求。但是通过使用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选择的选择选项

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

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

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

从上述解决方案中，没有任何一项对我有用。这工作：

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