JQuery Chosen option values

jqueryjquery-chosen

I am using Chosen jQuery plugin. I have a standard single select that looks like that:

<select data-placeholder="Choose a country..." id="country">
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
</select>

With Chosen, I end up with something like that:

<ul class="chosen-results">
    <li class="active-result" style="" data-option-array-index="0">Afghanistan</li>
    <li class="active-result" style="" data-option-array-index="1">Albania</li>
    <li class="active-result" style="" data-option-array-index="2">Algeria</li>
</ul>

Is there a simple way to keep the option values (AF,AL,DZ) in the list elements with Chosen, like a data-value or such attribute? I could not find that in the docs.

Thanks in advance.

Best Answer

jquery-chosen just adds to your select element just 'display: none'. So you could take all your values from it.

$('#yourSelectId').change(function() {
 alert(this.options[this.selectedIndex].value);
});