Chosen.js multiple select values in javascript

Question

I am using chosen.js to create a multiple select, but instead of processing the form in php, I am trying to use javascript to parse the values. My problem is that I cannot figure out how to retrieve the values from the multiple select.

I create the select with:

<select data-placeholder="Select a category..." name="categories[]" multiple style="width: 350px" class="chzn-select">

and attempt to get the selected values using these javascript calls:

$('.chzn-select').chosen().val();

returns null

and

$('.chzn-select').chosen().val(0);

returns

{"0":{"jQuery19109988393174677814":730},"length":1,"prevObject":{"0": {"jQuery19109988393174677814":1,"location":{}},"context":{"jQuery19109988393174677814":1,"location":{}},"length":1},"context":{"jQuery19109988393174677814":1,"location":{}},"selector":".chzn-select"}

using JSON.stringify()

Andreas Schwarz · Accepted Answer · 2013-03-21 21:33:48Z

7

You mixed the use of chosen() and val().

The former transforms your select into a nice multiple select list, while the latter gets you the value(s) of the selected element(s).

So your JavaScript code would be:

// Transforms your select element
$(".chzn-select").chosen();

// Gets the selected value(s)
$(".chzn-select").val();

The val() method will return an array containing each selected option.

I quickly created a jsFiddle to show you how to use the plugin: when you click on the button, you will see the selected values in the console.

answered Mar 21, 2013 at 21:33

Andreas Schwarz

1,8081 gold badge18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Chosen.js multiple select values in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related