119

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);
});
MBaas
  • 7,248
  • 6
  • 44
  • 61
gak
  • 32,061
  • 28
  • 119
  • 154
  • I couldn't run the jsfiddle demonstration you provided. could you please update it. – Lucky Feb 19 '16 at 06:59
  • Okay. The reason I couldn't run your demonstration was the chosen library was pointing to an incorrect url. Here's the updated [jsfiddle](http://jsfiddle.net/queZ6/666/) – Lucky Feb 22 '16 at 10:25

4 Answers4

237

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");
wilbbe01
  • 1,931
  • 1
  • 24
  • 38
Lucas Welper
  • 2,666
  • 2
  • 18
  • 11
  • 6
    FYI: they've updated to 1.0 which now uses `chosen:updated` instead of `liszt:updated` – Henesnarfel Jul 31 '13 at 14:10
  • I stumbled here as I was trying to find a way to select the best currently matching option from a multi select chosen search result list (whenever focus was lost). Here's [a short fiddle](http://jsfiddle.net/zFBCy/4/) about my explorations. You don't event need to trigger any events. Perhaps, it is of use for someone else too... :) – Timo Mar 26 '14 at 11:04
  • despite that the above code works,this happens only once.I mean if I click again menu where chosen plugin is attached does not take the value which is inside val().Why this might be happening – Dimitris Papageorgiou Mar 31 '14 at 18:54
  • I don't get how this get – Tim Lieberman May 04 '14 at 23:37
  • I don't get how this get's you your value. – Tim Lieberman May 04 '14 at 23:37
  • 9
    I know this is an old post - but a simpler way to update is just in one string: `$('select').val(2).trigger("chosen:updated");` – Andrew Newby Jun 24 '14 at 14:33
  • mentioning `liszt:updated` is important. thx. `chosen:updated` doesn't work on the version of chosen we have, which is used by a wordpress plugin we use - it needs upgrading, but wordpress upgrades on big sites require a lot of planning! – dewd Nov 25 '14 at 09:15
  • 10
    @Lucas Welper: you should also change `$('select').val(2);` into `$('select').val(2).change();`, because changing the selected option of a select with jQuery doesn't trigger the change event and some people might need it. – machineaddict May 28 '15 at 09:15
51

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

Aamir
  • 16,329
  • 10
  • 59
  • 65
3

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/

Tobi G.
  • 1,530
  • 2
  • 13
  • 16
1

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 > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
SlavisaPetkovic
  • 357
  • 3
  • 11