JQuery val () in HTML Select text takes precedence over value

Question

Select an HTML example below:

<select name="selValues" id="selValues"> <option value="1">One</option> <option value="2">Two</option> <option value="3">5</option> <option value="4">3</option> </select> 

If we write the following jQuery statement:

 $('#selValues').val('2'); // Two will get selected $('#selValues').val('3'); // 3 will get selected instead of 5?? 

Why is that?

Answer 1

Using

 $("#selValues option[value='3']").attr('selected', 'selected'); 

Also a good article on

jQuery - selection of elements - tips and tricks

Answer 2

The val () method gets or sets the selected text. Instead, you can use selectIndex:

 $('#selValues').get(0).selectedIndex=2; 

Answer 3

When choosing options, jQuery first looks at the value, and then at the option text. It also goes through options in order. So, $('#selValues').val('3') first selects options 3, but immediately after that it changes the selection to option 4 (since it has the text “3”). Use multiple selections to see that both options are actually selected

 <select name="selValues" id="selValues" multiple="multiple"> <option value="1">One</option> <option value="2">Two</option> <option value="3">5</option> <option value="4">3</option> </select> 

Answer 4

Starting with jQuery 1.4, it has now become unambiguous. Now it will select by value, not text value http://jquery14.com/day-01#backwards

If you still need to select by value, then the proposed method here