Tag Archives: selectedindex

How to Set the Selected Index of a Dropdown using jQuery CodeUnit 20 JUN 2011

There are a number of ways to set the selected index of a dropdown list when it comes to jQuery, though unfortunately one of them only works about half the time, basically whenever the guys behind the library remember to fix a particular bug in the system for that particular release.

However, these two methods below all work flawlessly, and should give you all the tools you need (note the first two examples are actually the same method):

// sets selected index of a select box to the option with the value "0"

// sets selected index of a select box to the option with the value ""

// sets selected index to first item using the DOM
$("select#elem").get(0).selectedIndex = 0;

The method you would expect to see but which I have omitted because it is a recurring bug that gets fixed in most but not all releases is of course the manipulation of the selectedIndex attribute through the attr() call. But seeing as the DOM method works well, there is no reason to even bother listing this one anymore!


jQuery: Change the Selected Index of a Dropdown List CodeUnit 22 OCT 2010

To change the selected value, or selected index if you will, of a dropdown list using jQuery is not particularly difficult.

The classic method to achieve this is to simply set the dropdown’s value to a value already contained in the list using val(). (Of course this does require that the specified value is actually in the list, either specified as the value of an option or the option text itself!)


<select name=”testselect” id=”testselect”>
<option>Value 1</option>
<option>Value 2</option>

We can force the selection of the second option with:

$('#testselect').val('Value 2');

Alternatively, now that the jQuery bug has been fixed, you could also set the selectedIndex attribute of the dropdown list like so:

$("#testselect").attr('selectedIndex', 1); 

And now you know! :)