Changing selection in a select with the Chosen plugin

Question

I m trying to change the currently selected option in a select with the Chosen plugin   The documentation covers updating the list  and triggering an event when an option is selected  but nothing  that I can see  on externally changing the currently selected value   I have made a jsFiddle to demonstrate the code and my attempted ways of changing the selection      button   click function            select   val 2          select   chosen   val 2          select   chosen   select 2

User · Answer

Sometimes you have to remove the current options in order to manipulate the selected options.

Here is an example how to set options:

<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 howto append options): https://jsfiddle.net/59x3m6op/1/

User · Answer

From the  Updating Chosen Dynamically  section in the docs   You need to trigger the  chosen updated  event on the field    document  ready function             select   chosen            button   click function                select   val 2              select   trigger  chosen updated                   NOTE  versions prior to 1 0 used the following      select   trigger  liszt updated

User · Answer

My answer is late  but i want to add some information that is missed in all above answers   1  If you want to select single value in chosen select       select-id   val  22   trigger  chosen updated      2  If you are using multiple chosen select  then may you need to set multiple values at single time       documents   val   22    25    27    trigger  chosen updated      Information gathered from following links  1  Chosen Docs 2  Chosen Github Discussion

User · Answer

In case of multiple type of select and or if you want to remove already selected items one by one  directly within a dropdown list items  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  gt  -1            arrayCurrent splice index  1             jQuery   searchlocation   val arrayCurrent  trigger  chosen updated

[javascript] Changing selection in a select with the Chosen plugin

Examples related to javascript

Examples related to jquery

Examples related to select

Examples related to jquery-chosen