Subscribe
Please visit my new Web Site https://coderstechzone.com
When you bind a DropdownList by data sometimes it may require to do something in the client side using javascript or jquery. To read the same post using javascript click here. In this article i will show you how one can get DropdownList SelectedValue, SelectedText & SelectedIndex. So that you can now play with Asp.net DropdownList control. The output like below:
An example of complete code is given below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>How to get Selected value, Selected index & Selected text of a DropDownList</title>
<script src="Script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('select[id$=DropDownList1]').bind("change keyup", function () {
$('#info').html(
"<b>Selected Value:</b> " + $('#<%= DropDownList1.ClientID%>').val() +
"<br />" +
"<b>Selected Index:</b> " + $('#<%= DropDownList1.ClientID%>').get(0).selectedIndex +
"<br />" +
"<b>Selected Text:</b> " + $('select[id$=DropDownList1] :selected').text());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>To display Selectedvalue, Selectedindex & Selectedtext please select an item from the DropDownList</h2>
<asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
<asp:ListItem Text="Four" Value="4"></asp:ListItem>
<asp:ListItem Text="Five" Value="5"></asp:ListItem>
</asp:DropDownList>
<hr /><br />
<div id="info"></div> </div>
</form>
</body>
</html>
Code explanation:
The line $('#<%= DropDownList1.ClientID%>').val() will return you the selectedtext.
The line $('#<%= DropDownList1.ClientID%>').get(0).selectedIndex will return you the selectedindex
The line $('select[id$=DropDownList1] :selected').text()) will return you selectedtext.
Note:
Here i used two event change & keyup because the change event works in IE wheres keyup event works for Mozilla, Chrome and Safari.
Script Tested for the following browsers:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome
3 comments:
can you please tell me , how you included the code snippets in your post. It is looking very nice.Can you just tel me the process.I am a new blogger and it will be very helpful if you share that thing.
Thanks a lot in advance
Kumar
good explanation and very helpful article
Excellent! This helped me a lot with my code. Thanks!
I WOULD BE DELIGHTED TO HEAR FROM YOU