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! :)

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Wasim Kazi

    nice example man…!

  • Anton Stoychev

    Craig, that doesn’t seem to work for me ? However it might be firefox not updating the HTML preview. But when I do:

    $option.attr(‘selected’, true).siblings(‘option’).removeAttr(‘selected’);

    it does.

    • Correct. This post is outdated as jQuery has since gone and changed what they defined to be attributes (attr), splitting out certain elements in a new properties (prop) group. “selected” must now be changed using .prop() instead of .attr()

  • Daivu Acet

    i need sort by who used by you… for sorting in comment… can you tell me this is plugin or  core coding…??

    plz your help is important with us..

  • Alok Jain

    Now it should be .prop instead of .attr it’s updated in recent versions of jquery
    $(“#testselect”).prop(‘selectedIndex’, 1);

    • Martin Alurralde

      Thanks Alok, attrib was driving me crazy, with prop all work fine now.