jQuery Chosen Value

Question

So I'm using a jQuery plugin called Chosen for my dropdowns and I notice that the values that I have in the options is not on the chosen lists

Here's the Default:

<select id="coating">
    <option value="0">Varnish</option>
    <option value="50">Gloss</option>
    <option value="34">Matte</option>
    <option value="0">Overlaminate</option>
    <option value="10">Clear Gloss</option>
    <option value="11">Clear Matte</option>
</select>

And here's what Chosen resulted with:

<ul class="chosen-results">
    <li class="active-result" data-option-array-index="0">Varnish</li>
    <li class="active-result" data-option-array-index="1">Gloss</li>
    <li class="active-result" data-option-array-index="2">Matte</li>
    <li class="active-result" data-option-array-index="3">Overlaminate</li>
    <li class="active-result" data-option-array-index="4">Clear Gloss</li>
    <li class="active-result" data-option-array-index="5">Clear Matte</li>
</ul>

So I'm wondering if there's a way to get the values from the option carry over to the chosen lists.

Answer 1

UPDATED to include optgroup

With this...

<select id="coating">
    <optgroup label="Varnish">
        <option value="50">Gloss</option>
        <option value="34">Matte</option>
    </optgroup>
    <optgroup label="Overlaminate">
        <option value="10">Clear Gloss</option>
        <option value="11">Clear Matte</option>
    </optgroup>
</select>

You can do this:

$("#coating").change(function() {
    var v = $(this).val();
    alert(v);
});

https://jsfiddle.net/jreljac/a38vLuoh/1/

You should get the value you are expecting. This plugin uses the hidden select element to send all the data. If you are submitting in a traditional form make sure to include a name attribute.

The optgroup tag groups the items in a select for you - they are not selectable and items in that tag are nested under them http://www.w3schools.com/tags/tag_optgroup.asp