65

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

j0k
  • 22,600
  • 28
  • 79
  • 90
Aakash Shah
  • 669
  • 1
  • 5
  • 12
  • 1
    @Andrew it's a reasonable question - I too wondered if Chosen was properly modifying the underlying select box (turned out to be a DOM inspector not refreshing properly). – mikemaccana Jun 07 '12 at 11:01
  • @nailer My issue is not with the reasonableness, it is with the effort put into the question. Which in this case is close to none. Go through the four points in my link and tell me if any of them were demonstrated here. – Andrew Jun 07 '12 at 14:41
  • @Andrew Excellent point. – mikemaccana Jun 07 '12 at 14:51
  • @arvind, I used your code and worked for me too for displaying multi-select. I added var1=$(this).val() to store but dont know how to submit var1 with form. Working on it. – Heena Shah Jul 24 '13 at 13:32

9 Answers9

97
$("#select-id").chosen().val()
Ben Truby
  • 1,407
  • 11
  • 13
  • 8
    This worked for me in comparison to the accepted answer which did not. – pbojinov Jan 25 '13 at 01:18
  • Shows me `TypeError: $(...).chosen.val is not a function` – Lucky Feb 23 '16 at 16:21
  • @shankshera yes, I got it with the `val()`. this error showed up in the console that chosen is not a valid function. but my other chosen api's are working fine. – Lucky Mar 08 '16 at 07:04
  • 1
    @Lucky your code actually lacks two sets of `()`. One after `chosen` and one after `val`. Try `$(...).chosen().val()` – WhiteHotLoveTiger Mar 24 '16 at 12:08
  • 1
    This works for me, but I'd like to comment that chosen creates a div underneath the select. This is not what you are targetting with .chosen(). I mistakenly set my query selector as '#select-id_chosen', but the correct selector was '#select-id'. When selecting the wrong tag with jquery, and then using the .chosen() method, it returns this error: Uncaught TypeError: Cannot read property 'length' of undefined. – Millar248 Oct 16 '18 at 20:09
70

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

$("form.my-form .chosen-select").val()
Dorian
  • 22,759
  • 8
  • 120
  • 116
Sergii
  • 1,320
  • 10
  • 10
  • 5
    this is not the correct way.. because, if same page have multiple selectbox it will return fake value :) – Miqdad Ali Jan 21 '13 at 09:56
  • 1
    This the correct answer.The result though is an array and my question is how am I going to extract the values from the array so I can put them in the db.I just need some hint on the PHP code needed here. – Dimitris Papageorgiou Feb 25 '14 at 18:23
18

This worked for me

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

     disable_search_threshold: 10

}).change(function(event){

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

});
MD SHAHIDUL ISLAM
  • 14,325
  • 6
  • 82
  • 89
Arvind
  • 938
  • 9
  • 23
12
$("#select-id").chosen().val()

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

MD SHAHIDUL ISLAM
  • 14,325
  • 6
  • 82
  • 89
user3423551
  • 129
  • 1
  • 2
  • This doesnt work for me - i land up getting 2 copies of the variable (when i have 2 options selected in the `chosen`), so something like this is obtained: `var[] = 111; var[]=3348;` – kneidels Apr 20 '15 at 15:58
9

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);
});
Panagiotis Koursaris
  • 3,794
  • 4
  • 23
  • 46
  • 1
    You can directly reference the original select element(s) in the selector as well, too, rather than using chosen's applied `.chosen-select` class. – BobRodes Jul 19 '16 at 18:14
7

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.)

BobRodes
  • 5,990
  • 2
  • 24
  • 26
3

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

 $("#select-id").chosen().find("option:selected" ).text();
Hoàng Vũ Tgtt
  • 1,863
  • 24
  • 8
  • This or `$("#select-id").chosen().find("option:selected" ).attr('somArbitraryAttributeNameFromOptionElement')` – uchuugaka Jun 10 '20 at 06:48
2

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.

Osogtulak
  • 21
  • 1
0

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.)

John James Jacoby
  • 1
  • 1