JQuery Chosen Value
So, I am using a jQuery plugin called Chosen for my dropdowns and I notice that the values I have in the options are not listed in the selected 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 this is what brought Chosen:
<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 is a way for the values from the option to wrap into the selected lists.
source to share
UPDATED enable 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 it:
$("#coating").change(function() {
var v = $(this).val();
alert(v);
});
https://jsfiddle.net/jreljac/a38vLuoh/1/
You should get the expected value. This plugin uses a hidden select element to send all data. If you are submitting in traditional form, be sure to include the attribute name
.
The tag optgroup
groups the items in a selection for you - they cannot be selected and the items in that tag are nested underneath them http://www.w3schools.com/tags/tag_optgroup.asp
source to share
With this, you can get the selected values.
$("#coating")
.chosen()
.change(function() {
alert($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<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>
source to share