Reputation: 461
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.
Upvotes: 3
Views: 1729
Reputation: 15365
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
Upvotes: 1
Reputation: 15875
Using this you can get the values you select.
$("#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>
Upvotes: 0