Here’s a very simple script which will set ASP.NET DropDownList 3rd value as selected when button will be clicked with jQuery.
Let us assume you have an DropDownList values as shown below
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="0">SELECT</asp:ListItem>
<asp:ListItem Value="1">APPLE</asp:ListItem>
<asp:ListItem Value="2">BANANA</asp:ListItem>
<asp:ListItem Value="3">ORANGE</asp:ListItem>
<asp:ListItem Value="4">MANGO</asp:ListItem>
</asp:DropDownList>
Following jQuery code will set your 3rd value as selected from above ASP.NET DropDownList Control.
$("#<%=DropDownList1.ClientID %> option[value='2']").attr("selected", "selected");
I will add Microsoft CDN hosted jQuery libarary as shown below.
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
Here’s an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to set asp.net DropdownList value using jQuery | aspxtutorial.com</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
$("#<%=DropDownList1.ClientID %> option[value='2']").attr("selected", "selected");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
How to set asp.net DropdownList value using jQuery</h1>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="0">SELECT</asp:ListItem>
<asp:ListItem Value="1">APPLE</asp:ListItem>
<asp:ListItem Value="2">BANANA</asp:ListItem>
<asp:ListItem Value="3">ORANGE</asp:ListItem>
<asp:ListItem Value="4">MANGO</asp:ListItem>
</asp:DropDownList>
<input id="btnClick" type="button" value=" Click " />
</div>
</form>
</body>
</html>
Output
Download
DropDownList-jQuery-selected.rar (1.05 kb)
See live demo