Introduction: In this article I am going to explain How to get
DropDownList selected item’s Index, Value and Text using jQuery in asp.net.
In previous articles i explained jQuery AJAX JSON example to call Asp.net server side function without any post back and jQuery to calculate Running Total of Asp.Net Textbox values and validate,upload,crop and store image in folder in asp.net using jQuery and Upload multiple files or images through one fileupload control using jQuery and jQuery to Enable,Disable,Show and Hide DropDownList,TextBox and Button based on DropDownList selected value
Description: While working on
asp.net project, it is very common
requirement to get the Dropdownlist ‘s selected item’s index or value or text.
For
that we have dropdownlist attributes like "SelectedIndex" to get the selected item’s
index, "SelectedValue" to get the selected item’s value and "SelectedItem.Text" to get selected item’s text. But if we want to get these using jQuery then
below is the solution.
Implementation: Let’s create a simple asp.net web page to demonstrate the concept.
HTML Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Example to get DropDownList selected item
index, value and text</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function
() {
$('#<%=ddlWeekDays.ClientID
%>').on("change", function () {
//Get
DropDownlist selected item index
var selectedIndex = $(this).find("option:selected").index();
//Get
DropDownlist selected item value
var selectedValue = $(this).find("option:selected").val();
//Get
DropDownlist selected item text
var selectedText = $(this).find("option:selected").text();
$("#spnIndex").text(selectedIndex);
$("#spnValue").text(selectedValue);
$("#spnText").text(selectedText);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset
style="width:
380px;
height:
150px;">
<legend>Get DropDownList Selected item Index,
Value and Text</legend>
<table>
<tr>
<td>Select Day:
<asp:DropDownList ID="ddlWeekDays" runat="server">
<asp:ListItem Value="0" Text="Select"></asp:ListItem>
<asp:ListItem Value="1" Text="Monday"></asp:ListItem>
<asp:ListItem Value="2" Text="Tuesday"></asp:ListItem>
<asp:ListItem Value="3" Text="Wednesday"></asp:ListItem>
<asp:ListItem Value="4" Text="Thursday"></asp:ListItem>
<asp:ListItem
Value="5" Text="Friday"></asp:ListItem>
<asp:ListItem Value="6" Text="Saturday"></asp:ListItem>
<asp:ListItem Value="7" Text="Sunday"></asp:ListItem>
</asp:DropDownList>
</td>
<td>Selected Index :
</td>
<td>
<span id="spnIndex"></span>
</td>
</tr>
<tr>
<td></td>
<td>Selected Value :
</td>
<td>
<span id="spnValue"></span>
</td>
</tr>
<tr>
<td></td>
<td>Selected Text :
</td>
<td>
<span id="spnText"></span>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..