The most correct way to select an option in the <select> field

Question

I know that there are several ways to select a specific option from jQuery:

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

Assuming you have both the pointer of the parameter you want to select and its value, what is the most correct way (from above or otherwise) to make it selected?

By "most correct" I mean:

• Best practice if any
• Correctly set the value so that it is submitted with the form and can be retrieved using any of the above methods.
• Any other reasons why I would choose one method over others

Answer 1

$ select.val ("SomeValue")

This is good, in the general case, when it selects not multiple , and you do not have two different <option> with the same value . If in this case I will go with this as the most widely read option.

$ select [0] .selectedIndex = 1

This is more straightforward, so slightly faster, and you need to be unique for the case when you have several options with the same value.

If you can have multiple -select, you should get / set the selection of each option separately:

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

But:

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

Not the best approach. The problem with attr() is a nasty hack for accessing the DOM properties and HTML attributes, as if they were the same, trying to hide the difference with you. In this case, attr() should set the selected DOM property, which is a boolean. So attr('selected', true) will make more sense; 'selected' as a string value also works, but only because all non-empty string values ​​are "true in JavaScript".

If you actually set the HTML selected attribute here, this would not affect the selected parameter, because the selected attribute actually matches the defaultSelected property, not the selected ! The selected property reflects the contents of the execution form modified by the user; defaultSelected reflects the actual attribute in the document containing the initial selection state.

(Except IE, due to an error in the implementation of the default values, as well as in other browsers in some situations that are too confusing and confusing. To assume: do not try to install selected HTML from the script, as the results may be unpredictable. DOM properties. The same applies to value / defaultValue for inputs and checked / defaultChecked for checkbox / radio.)

Answer 2

The most used method is $select.val("someValue") , this is the official method in the documentation for setting the value of any input, so it will be the most optimized and also hit performance areas.

For # 2, yes, it satisfies this, for # 3 ... it is short and still makes your intention very explicit.

As said, the fastest way, if you set thousands of select elements, is the route $select[0].selectedIndex = 1 ... you cannot get faster than your own DOM properties. When setting the value of one of them (if it does not have a large number of elements, and in this case it goes with .selectedIndex ), the speed should still not matter between any of the three.

Answer 3

As Nick Craver said, any of them will work, it really depends on the context that will be best for your needs.

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

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

But you are losing the benefits of jquery by doing this.

If you need to make many changes, for example based on a template, you can use jquery to help with this, which will reduce the number of unverified codes that you need to write. For a good list of templates, you can do this: http://www.myphpetc.com/2009/03/jquery-select-elements-tips-and-tricks.html .

So, in any situation there is no better approach, so there are many ways to set option in the select element, but if you give the user history where you are doing this, you can explain the specific best practices.