How to reset selected jquery selection option using jQuery?

Question

I tried a lot of things and nothing works.

I use jQuery and Chosen plugin.

Methods I 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 parameter after selecting it. I can't seem to clean it.

Here is the selection window:

 <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 the ability to clear the selection box with one option? (In the future he will have more opportunities.

Answer 1

Setting the value of the select element to an empty string is the right way to do this. However, this only updates the root element of select . The chosen user element does not know that the root select been updated.

To notify chosen that the select parameter has been changed, you must call chosen:updated :

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

or, if you are not sure if the first parameter 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 called Update selected dynamically ).

---

PS Older versions of Chosen use a slightly different event:

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

Answer 2

The first option should be sufficient: http://jsfiddle.net/sFCg3/

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

But you have to make sure that you are triggering this event, for example, by clicking a button or ready or a document, for example, on jsfiddle.

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

Edit:
Now that you have specified that you are using the Chosen plugin, you need to call

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

after changing the value to update the interface.

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

Answer 3

Try restarting the update. Select the field with the last selected JS.

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

http://harvesthq.imtqy.com/chosen/

The selected drop-down menu will be updated with the newly loaded selection box using Ajax.

Answer 4

Try the following:

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

Answer 5

I use this:

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

tested on IE, Safari and Firefox

Answer 6

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

and set the default value of the parameter. ''

It should be used with the selected 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

Answer 7

This is more efficient than searching.

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

Answer 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 the above configuration and apply class='chosen-select-deselect' to manually deselect and set the value to empty

or if you want to deselect all combos, then apply the configuration as shown 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]); } 

Answer 9

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

Answer 10

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

PS: make sure you have "selected-sprite.png" in the right place according to the selected .css so that the icons are visible.

Answer 11

On Chrome Version 49

you always need this code

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

Answer 12

I think you need to assign a new value to the selection, so if you want to clear your selection, you probably want to assign it to one that has value = "". I think you can get it by assigning a value to an empty string, so .val ('')

Answer 13

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/

Answer 14

You can try this with a drop of reset (empty)

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

Answer 15

New Chosen libraries do not use liszt. I used the following:

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

Answer 16

If you need to select the first option regardless of its value (sometimes the first parameter value is not empty), use this:

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

It will receive the value of the first option and set it as the selected one, and then activate the update in the Favorites. Therefore, it works like reset for the first option in the list.

Answer 17

Similarly, I had the same requirement. But dumping a dropdown by setting an empty string with jquery will not work. You must also initiate an 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 the control you are using, you may need to use the syntax below.

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

Link: How to reset selected jquery selection

Answer 18

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

Answer 19

Just add a shift trigger as follows:

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

Answer 20

If you use the chosen jquery plugin, then to update or clear the contents 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.

Answer 21

Of the above solutions, I did not succeed. This worked:

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

Why? :)

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