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

Answer 1

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.