When we work work with dropdownlist
its sometime required to get
dropdownlist value, text or index at webpage. This can be done by doing some
code at server side. 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 to avoid code we
can also do this job at client end by using jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>
<style type="text/css">
.style1
{
width: 4px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 440px; height: 150px;">
<legend><strong>Get DropDownList Selected Index, Value & Text
Using jquery</strong></legend>
<table>
<tr>
<td> </td>
<td class="style1"> </td>
<td> </td>
<td>
</td>
</tr>
<tr>
<td>Select
Day:
<asp:DropDownList ID="ddlWeekDays"
runat="server"
Width="150px">
<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 class="style1"> </td>
<td>Selected
Index :
</td>
<td>
<span id="spnIndex"></span>
</td>
</tr>
<tr>
<td></td>
<td class="style1"> </td>
<td>Selected
Value :
</td>
<td>
<span id="spnValue"></span>
</td>
</tr>
<tr>
<td></td>
<td class="style1"> </td>
<td>Selected
Text :
</td>
<td>
<span id="spnText"></span>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment