Chosen Jquery Plugin - getting selected values

JqueryJquery Chosen

Jquery Problem Overview


How can i get the selected values from the chosen Multi-select Box?

Jquery Solutions


Solution 1 - Jquery

$("#select-id").chosen().val()

Solution 2 - Jquery

Like from any regular input/select/etc...:

$("form.my-form .chosen-select").val()

Solution 3 - Jquery

This worked for me

$(".chzn-select").chosen({

     disable_search_threshold: 10

}).change(function(event){

     if(event.target == this){
  	    alert($(this).val());
     }

});

Solution 4 - Jquery

$("#select-id").chosen().val()

this is the right answer, I tried, and the value passed is the values separated by ","

Solution 5 - Jquery

If anyone wants to get only the selected value on click to an option, he can do the follow:

$('.chosen-select').on('change', function(evt, params) {
    var selectedValue = params.selected;
    console.log(selectedValue);
});

Solution 6 - Jquery

As of 2016, you can do this more simply than in any of the answers already given:

$('#myChosenBox').val();

where "myChosenBox" is the id of the original select input. Or, in the change event:

$('#myChosenBox').on('change', function(e, params) {
    alert(e.target.value); // OR
    alert(this.value); // OR
    alert(params.selected); // also in Panagiotis Kousaris' answer
}

In the Chosen doc, in the section near the bottom of the page on triggering events, it says "Chosen triggers a number of standard and custom events on the original select field." One of those standard events is the change event, so you can use it in the same way as you would with a standard select input. You don't have to mess around with using Chosen's applied classes as selectors if you don't want to. (For the change event, that is. Other events are often a different matter.)

Solution 7 - Jquery

if you want to get text of a selected option (chosen get display selected value)

 $("#select-id").chosen().find("option:selected" ).text();

Solution 8 - Jquery

This solution worked for me

var ar = [];
$('#id option:selected').each(function(index,valor){
	ar.push(valor.value);
});
console.log(ar);

be sure to have your <option> tags with they correspondant value attribute. Hope it helps.

Solution 9 - Jquery

I believe the problem occurs when targeting by ID, because Chosen will copy the ID from the original select onto it's newly created div, leaving you with 2 elements of the same (now not-unique) ID on the current page.

When targeting Chosen by ID, use a selector specific to the select:

$( 'select#yourID' ).on( 'change', function() {
    console.log( $( this ).val() );
} );

...instead of...

$( '#yourID' ).on( 'change', function() {
    console.log( $( this ).val() );
} );

This works because Chosen mirrors its selected items back to the original (now hidden) select element, even in multi-mode.

(It also continues to work with or without Chosen, say... if you decide to go a different direction in your application.)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAakash ShahView Question on Stackoverflow
Solution 1 - JqueryBen TrubyView Answer on Stackoverflow
Solution 2 - JquerySergiiView Answer on Stackoverflow
Solution 3 - JqueryArvindView Answer on Stackoverflow
Solution 4 - Jqueryuser3423551View Answer on Stackoverflow
Solution 5 - JqueryPanagiotis KoursarisView Answer on Stackoverflow
Solution 6 - JqueryBobRodesView Answer on Stackoverflow
Solution 7 - JqueryHoàng Vũ TgttView Answer on Stackoverflow
Solution 8 - JqueryOsogtulakView Answer on Stackoverflow
Solution 9 - JqueryJohn James JacobyView Answer on Stackoverflow