Question

OK so I’m populating a selectbox with a JSON which looks something like this:

Object{
"data":
[{"filter":"en","id":"2","label":"English"},
{"filter":"no","id":"3","label":"Norwegian"},
{"filter":"nl","id":"4","label":"Dutch"}]
}

Currently if I do jQuery("#mySelect").val() I get the value of “id” for the selected option and if I use the .text() or .html() I get the value of the selected label.
What I want to do is change the selected option based on the value of “filter”, so for example I want to check if the option that is selected has the filter “no” and if it doesn’t I want to select the option which does.

Any help would be appreciated.

Answer 1

You can use data attributes for your porpose:

html

<select>
    <option data-filter="en" value="1">English</option>
    <option data-filter="no" value="2">Norwegian</option>
</select>​

js

$('select').change(function() {
    var id = $(this).find('option:selected').data('filter');
    alert(id);
});​

In case if you will create select dynamically you can set data attributes like: $('option').data('filter', 'no');

Example: http://jsfiddle.net/kzHfF/

P.S. You can put as mutch data attributes as you need.