在<select>框中选择选项的最正确方法

Question

I know there are multiple ways to select a particular option from a using jQuery:

1. $select.val("someValue")
2. $option.attr("selected", "selected")
3. $select[0].selectedIndex = 1

Assuming you have both the index of the option you wish to be selected and its value, what's the most correct way (from the above, or otherwise) to make it selected?

By "most correct", I mean:

1. Best practice, if any
2. Will correctly set the value so that it is submitted with the form, and can be retrieved using any of the above methods
3. Any other reason why I'd choose one method over others

Answer 1

The most used way is $select.val("someValue") , this is the official method in the documentation for setting a value of any input, so it'll be the most optimized one as well as they hit performance areas.

For #2, yes it satisfies this, for #3...it's short and still makes your intent very explicit.

That being said, the fastest way, if you're setting thousands of select elements is the $select[0].selectedIndex = 1 route...you can't get faster than native DOM properties. When setting the value of one though (unless it has lots of items, in which case again go with .selectedIndex ) the speed should be so far it doesn't matter between any of the three.

Answer 2

$select.val("someValue")

That's fine, in the common case where it's a non- multiple select and you don't have two different <option> s with the same value . If that's the case I'd go with this, as the most readable option.

$select[0].selectedIndex = 1

That's more direct, so marginally quicker, and is necessary to be unambiguous for the case where you have multiple options with the same value.

If you might have a multiple -select, you have to get/set the selectedness of each option separately:

$select[0].options[1].selected= true;

However:

$option.attr("selected", "selected")

Not generally the best approach. The problem with attr() is it's a nasty hack to access DOM properties and HTML attributes as if they are the same thing, trying to hide the difference from you. What attr() will do in this case is to set the selected DOM property , which is a boolean value. So attr('selected', true) would make more sense; 'selected' as a string value does also work, but only because all non-empty string values are 'truthy' in JavaScript.

If you were actually setting the HTML selected attribute here, it would not have an effect on the selectedness of the option, because the selected attribute actually maps to the defaultSelected property and not selected ! The selected property reflects the runtime form contents as altered by the user; defaultSelected reflects the actual attribute in the document containing the initial selectedness state.

(Except on IE, due to a bug in its implementation of default values, and also in other browsers in some situations which are too intricate and confusing to go into. Take-home advice: don't try setting the selected HTML attribute from script as the results may be unpredictable. Work with the DOM properties. The same is also true of value / defaultValue for inputs and checked / defaultChecked for checkbox/radio.)

Answer 3

As Nick Craver mentioned any of these will work, it really depends on the context as to which will be best for your needs.

Personally, if I need speed I just use something like (not tested, just an example):

var elem = document.getElementById('myselectid');
elem.options[1].value = 'some value'

But, you lose the benefits of jquery by doing this.

If you need to do many changes, based on a pattern, for example, then you can use jquery to help with that, which will reduce the amount of untested code you need to write. For a nice list of patterns you can do you can look at this: http://www.myphpetc.com/2009/03/jquery-select-elements-tips-and-tricks.html .

So, there is no one best approach that is best in any situation, which is why there are so many ways to set an option in a select element, but, if you give a user story where you are doing this, then a specific best practice can be explained.