How do I reset a jquery-chosen select option with jQuery?重置chosen组件值状态

Question

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.

Refer to my answer in my own question, it worked for me:- stackoverflow.com/questions/21191111/… — Sudhir Kesharwani, Feb 18 '14 at 15:57

Joseph Silber · Accepted Answer · 2013-08-13 17:50:18Z

up vote 76 down vote accepted

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 liszt:updated:

$('#autoship_option').val('').trigger('liszt: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('liszt:updated');

Update: The most recent version of Chosen uses a slightly different event:

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

Read the documentation here (find the section titled Updating Chosen Dynamically).

edited Aug 13 '13 at 17:50

answered Jul 6 '12 at 15:38

Joseph Silber
83.8k 19 138 154

That worked like a charm. I had a feeling I was missing something with Chosen. Thank you very much. :) – James Wilson Jul 6 '12 at 15:52

Argh, why isn't this in the documentation (or did I just miss it?) Thanks for this. – technomalogical Apr 12 '13 at 0:31

@technomalogical - It sure is in the documentation. Just search for Updating Chosen Dynamically on that page. – Joseph Silber Apr 12 '13 at 13:55

2

@JosephSilber It looks like Chosen has made a change, if you want to add this change to your answer to keep all informed since this one is at the top. .trigger("chosen:updated"); harvesthq.github.io/chosen– James Wilson Aug 12 '13 at 15:12

2

I think it's best to do:.find('option').removeAttr('selected').end().trigger('chosen:updated'). – cherouvim May 12 '14 at 11:53

show 5 more comments

rcdmk · Answer 2 · 2012-07-06 16:09:22Z

up vote 9 down vote

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/

edited Jul 6 '12 at 16:09

answered Jul 6 '12 at 15:35

rcdmk
7,126 3 14 38

The first option doesn't work. I am guessing because of the Chosen plugin taking control. – James Wilson Jul 6 '12 at 15:49

I've edited the answer. – rcdmk Jul 6 '12 at 16:09

Thanks for editing the answer to make it applicable. I did mention in the original posting that it was for jQuery and Chosen plugin. – James Wilson Jul 6 '12 at 16:43

If so, perdon me for missreading. – rcdmk Jul 6 '12 at 16:55

3

"Also make sure that theres always a value attribute on the option tags. If not, some browsers always return empty on val()." +1 for this!!! – sskoko Sep 27 '13 at 16:50

add a comment

Rakesh · Answer 3 · 2013-08-12 06:24:17Z

up vote 4 down vote

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.

answered Aug 12 '13 at 6:24

Rakesh
405 3 8

It doesn't set to 0 but rather the 0 index of chosen which is "Select an Option":stackoverflow.com/questions/29653375/… – SearchForKnowledge Apr 15 at 16:02

add a comment

Antonio Beamud · Answer 4 · 2012-07-06 15:37:54Z

up vote 2 down vote

Try this:

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

answered Jul 6 '12 at 15:37

Antonio Beamud
1,637 9 15

add a comment

jrg · Answer 5 · 2014-05-12 15:20:41Z

up vote 1 down vote

I use this:

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

tested on IE, Safari & Firefox

answered May 12 '14 at 15:20

jrg
11 2

add a comment

Nir · Answer 6 · 2012-07-06 15:35:22Z

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('')

mafafu · Answer 7 · 2012-07-06 15:36:32Z

up vote 0 down vote

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

answered Jul 6 '12 at 15:36

mafafu
751 9 18

This did not work as well. Probably because of the Chosen plugin taking control. – James Wilson Jul 6 '12 at 15:50

add a comment

Toni Almeida · Answer 8 · 2013-03-21 13:55:48Z

up vote 0 down vote

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

and set the default option value to ''.

It has to be used with Chosen Updated Jquey 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

edited Mar 21 '13 at 13:55

Toni Almeida
3,673 4 24 43

answered Mar 21 '13 at 13:32

Kareem
475 6 7

so Toni. is your edit just deleting two words of my answer and retyping them back again? what a great edit! – Kareem Jun 20 '13 at 16:34

add a comment

bancer · Answer 9 · 2014-02-22 01:52:28Z

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/

Naresh Ramoliya · Answer 10 · 2014-11-13 10:17:33Z

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

Philip · Answer 11 · 2014-12-18 21:34:01Z

up vote 0 down vote

This is more effective than find.

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

answered Dec 18 '14 at 21:34

Philip
1,577 28 58

add a comment

ter24 · Answer 12 · 2015-03-17 01:37:04Z

up vote 0 down vote

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

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

answered Mar 17 at 1:37

ter24
117 1 9

add a comment

harshgupta · Answer 13 · 2015-03-27 11:55:34Z

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.

Arthur · Answer 14 · 2015-05-14 17:57:58Z

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.

score 0 · Answer 15

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

How do I reset a jquery-chosen select option with jQuery?重置chosen组件值状态

15 Answers