We use the change event in the JQuery for get value of dropdown
on Dropdownlist selectedindexchanged event in JQuery
In the JQuery we write code like :-
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
.ASPX Page Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Get Selected Value on Dropdownlist selectedindexchanged event using JQuery
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%">
<tr>
<td align="right">
Select Name:
</td>
<td>
<select id="ddlName" onchange="GetName()" runat="server">
<option value="0">Select</option>
<option value="1">Subhash</option>
<option value="2">Rakesh</option>
<option value="3">Satendra</option>
<option value="4">Raju</option>
<option value="5">Sachin</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name:-
</td>
<td>
<b>
<label id="lName" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name value:-
</td>
<td>
<b>
<label id="lValue" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
</table>
</form>
</body>
</html>
DEMO:-
No comments:
Post a Comment