Set SelectedIndex of HTML SELECT using jQuery
 
Author:
Filed Under: HTML Select  |  DropDown
Published Date: Aug 10, 2011
Views: 1219
 

Abstract: Here Mudassar Ahmed Khan has explained how to set the selectedIndex of HTML Select DropDown using jQuery

 


The below code snippet explains how to set selectedIndex of HTML Select Dropdown using jQuery
<select id="mySelect">
    <option value="1">Yes</option>
    <option value="2">No</option>
</select>
<input type="button" id="demo" value = "Demo" />
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        //Set the selectedIndex
        $("#mySelect")[0].selectedIndex = 1;
    });
</script>
 
Explanation:
The button with ID demo is attached with a click event. When the button is clicked the selectedIndex of the HTML Select Dropdown with ID mySelect is set using jQuery