CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
OpuLance
OpuLance

Reputation: 461

jQuery Chosen Value

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

Answers (2)

Jason
Jason

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

rrk
rrk

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

Related Questions