How do I reset a jquery-chosen select option with jQuery?

问题

I have tried numerous things and nothing seems to be working.

I am using jQuery and Chosen plugin.

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.

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.

回答1:

Setting the select element's value to an empty string is the correct way to do it. However, that only updates the root select element. The custom chosen element has no idea that the root select has been updated.

In order to notify chosen that the select has been modified, you have to trigger 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:

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

回答2:

The first option should sufice: http://jsfiddle.net/sFCg3/

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

But you have to make sure you are runing this on an event like click of a button or ready or document, like on the jsfiddle.

Also make sure that theres always a value attribute on the option tags. If not, some browsers always return empty on val().

Edit:
Now that you have clarifyed the use of the Chosen plugin, you have to call

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

after changing the value for it to update the intereface.

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

回答3:

Try this to reload updated Select box with Latest Chosen JS.

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

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

It will Updated chosen drop-down with new loaded select box with Ajax.

回答4:

Try this:

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

回答5:

I use this:

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

tested on IE, Safari & Firefox

回答6:

If you are using chosen, a jquery plugin, then to refresh or clear the content of the dropdown use:

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

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

chosen:updated event will re-build itself based on the updated content.

回答7:

This is more effective than 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]);
    }

Use above config and apply class='chosen-select-deselect' for manually deselect and set the value empty

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

回答9:

$('#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.

I spent one full day to find out at the end that jquery.min is different from chosen.jquery.min

回答10:

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

回答11:

I am not sure if this applies to the older version of chosen,but now in the current version(v1.4.1) they have a option $('#autoship_option').chosen({ allow_single_deselect:true }); This will add a 'x' icon next to the name selected.Use the 'x' to clear the 'select' feild.

PS:make sure you have 'chosen-sprite.png' in the right place as per the chosen.css so that the icons are visible.

回答12:

In Chrome version 49

you need always this code

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

回答13:

i think you have to assign a new value to the select, so if you want to clear your selection you probably want to assign it to the one that has value = "". I think that you will be able to get it by assigning the value to empty string so .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');
});

Fiddle: http://jsfiddle.net/Z8nE8/

回答15:

You can try this to reset (empty) drop down

 $("#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:

The new Chosen libraries don't use the liszt. I used the following:

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

回答17:

If you need to have first option selected by no matter of its value (sometimes first option value is not empty) use this:

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

It will get value of first option and set it as selected then trigger update on Chosen. So it work like reset to first option on list.

回答18:

Exactly i had the same requirement. But resetting the drop down list by setting simply empty string with jquery won't work. You should also trigger update.

Html:
<select class='chosen-control'>
<option>1<option>
<option>2<option>
<option>3<option>
</select>

Jquery:
$('.chosen-control').val('').trigger('liszt:updated');

sometimes based on the version of chosen control you are using, you may need to use below syntax.

$('.chosen-control').val('').trigger("chosen:updated");

Reference: How to reset Jquery chosen select option

回答19:

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

回答20:

Simple add trigger change like this:

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

回答21:

from above solutions, Nothing worked for me. This worked:

$('#client_filter').html(' '); //this worked

Why is that? :)

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

来源：https://stackoverflow.com/questions/11365212/how-do-i-reset-a-jquery-chosen-select-option-with-jquery

标签

jquery

jquery-chosen