Change the selection in the list using the module you selected

Question

I am trying to change the currently selected parameter in the list using the module you have selected.

The documentation includes updating the list and triggering the event when an option is selected, but nothing (what I see) when changing the appearance of the current selected value.

I did jsFiddle to demonstrate the code , and my attempts to change the selection:

$('button').click(function() { $('select').val(2); $('select').chosen().val(2); $('select').chosen().select(2); }); 

Answer 1

In the "Update selected dynamically" section in docs : you need to fire the "selected: updated" event in the field

 $(document).ready(function() { $('select').chosen(); $('button').click(function() { $('select').val(2); $('select').trigger("chosen:updated"); }); }); 

NOTE. In versions prior to 1.0, the following was used:

 $('select').trigger("liszt:updated"); 

Answer 2

My answer is delayed, but I want to add some information that is missing in all the answers above.

1) If you want to select one value in the selected select.

 $('#select-id').val("22").trigger('chosen:updated'); 

2) If you use several selected options, then you may need to set several values ​​at a time.

 $('#documents').val(["22", "25", "27"]).trigger('chosen:updated'); 

Information collected from the following links:
1) Selected documents
2) Selected Github discussion

Answer 3

Sometimes it is necessary to delete the current parameters in order to manipulate the selected parameters.

Here is an example of how to set the parameters:

 <select id="mySelectId" class="chosen-select" multiple="multiple"> <option value=""></option> <option value="Argentina">Argentina</option> <option value="Germany">Germany</option> <option value="Greece">Greece</option> <option value="Japan">Japan</option> <option value="Thailand">Thailand</option> </select> <script> activateChosen($('body')); selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']); function activateChosen($container, param) { param = param || {}; $container.find('.chosen-select:visible').chosen(param); $container.find('.chosen-select').trigger("chosen:updated"); } function selectChosenOptions($select, values) { $select.val(null); //delete current options $select.val(values); //add new options $select.trigger('chosen:updated'); } </script> 

JSFiddle (including options for adding instructions): https://jsfiddle.net/59x3m6op/1/

Answer 4

In the case of a multiple selection type and / or if you want to delete already selected items one at a time, directly in the items in the drop-down list, you can use something like:

 jQuery("body").on("click", ".result-selected", function() { var locID = jQuery(this).attr('class').split('__').pop(); // I have a class name: class="result-selected locvalue__209" var arrayCurrent = jQuery('#searchlocation').val(); var index = arrayCurrent.indexOf(locID); if (index > -1) { arrayCurrent.splice(index, 1); } jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated'); });