Jquery: set <option> checked based on <select> attribute

Question

I'm trying to write a simple jquery script that would loop through all <select> elements on the page and pick up an attribute named selected and set option value to selected based on that.

example:

<select selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

On the example above the code would set option "two" to selected.

What is the cleanest way to write this?

edit:

For clarification, the main problem with my question and the example above is that I was using reserved keyword 'selected'. I would suggest using another attribute name (I changed my to data-selected, this is even valid with html5-spec :-) ).

<select data-selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 1

selected is a reserved property. No matter what you set it to, jQuery will return its value as "selected."

Instead, you can access the DOM attributes collection directly, like this:

 $('select[selected]').val(function() { return this.attributes.selected.value; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select selected="1"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select selected="2"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select selected="3"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> 

Answer 2

options have selected attributes. You can't have a selected attribute on a select element like that. You can have a data-attribute, or a name instead perhaps.

$('select[data-selected="1"]')

or

$('select[name="1"]')

To get the option with a value of 1 you can simply do and add a selected attribute to it:

$('select[data-selected="1"] option[value="1"]').attr('selected', 'selected');

DEMO

Answer 3

As mentioned in the other answers, selected is a reserved keyword.

Tweaked your html and this is now working:

<select mysv="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

$("select").each(function(){
    var sv = $(this).attr("mysv");
  $(this).find("option[value="+sv+"]").attr("selected", "selected");
});

Answer 4

This is the code I finally ended with. It has one extra thing that other solutions didn't have, checking of attribute availability. Other solutions will set the select field blank (even if there are no blank options available) if the attribute is missing.

$("select").each(function() {
   var selected_val = $(this).attr("data-selected");
   if(selected_val)
      $(this).val(selected_val);
});