javascript - How to programmatically select multiple options with Chosen.JS multiple select - Stack Overflow

I'm having trouble figuring out how to select multiple values in a multiple select programmatically, with chosenJS/chosen.js and still have the values binded to my ng-model (angularJS).

Case: I have a list of users from which some are already saved on the current project. I want to show these users as selected (but i have no idea how).

I have tried finding the indexs of the users that i want pre-selected and make them "selected" like this:

$('.chzn-container-multi').val(0).trigger('liszt:updated');
$('.chzn-container-multi').val(1).trigger('liszt:updated');
$('.chzn-container-multi').val(2).trigger('liszt:updated');

but this only selects the last one.

Any help would be much appreciated !

EDIT

With help from #Marek Kowalski i was able to select the values in my list, but it wasn't applied to the ng-model connected with my dropdown, anyone have a solution to this?

I'm having trouble figuring out how to select multiple values in a multiple select programmatically, with chosenJS/chosen.js and still have the values binded to my ng-model (angularJS).

Case: I have a list of users from which some are already saved on the current project. I want to show these users as selected (but i have no idea how).

I have tried finding the indexs of the users that i want pre-selected and make them "selected" like this:

$('.chzn-container-multi').val(0).trigger('liszt:updated');
$('.chzn-container-multi').val(1).trigger('liszt:updated');
$('.chzn-container-multi').val(2).trigger('liszt:updated');

but this only selects the last one.

Any help would be much appreciated !

EDIT

With help from #Marek Kowalski i was able to select the values in my list, but it wasn't applied to the ng-model connected with my dropdown, anyone have a solution to this?

• javascript
• jquery
• angularjs
• jquery-chosen

Share Improve this question Follow edited Feb 1, 2014 at 13:25 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Sep 2, 2013 at 10:48 Dennis HansenDennis Hansen 2511 silver badge44 bronze badges 1

• 1 Look at this directive github./localytics/angular-chosen – Chandermani Commented Sep 2, 2013 at 10:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

Selecting multiple values and updating the chosen can be done via this one-liner

For version < 1.0

$('.chzn-container-multi').val([0,1,2]).trigger('liszt:updated');

OR for version > 1.0

$('.chzn-container-multi').val([0,1,2]).trigger('chosen:updated');

I'm not sure this is the remended way of doing it, but the solution which works for me is to manually change the selected="selected" attributes on the options and than trigger the "liszt:updated" event. To select first 3 options use the following code:

$('select option:nth-child(1)').attr('selected', 'selected');
$('select option:nth-child(2)').attr('selected', 'selected');
$('select option:nth-child(3)').attr('selected', 'selected');
$('select').trigger('liszt:updated');
// since version 1.0 the event name is changed to
$('select').trigger('chosen:updated');