We use the onchange event in the java script for get value of dropdown
on Dropdownlist selectedindexchanged event in JavaScript
In the java script we write code like :-
<script type="text/javascript">
function GetName() {
var name = document.getElementById("ddlName");
var strname = name.options[name.selectedIndex].text;
document.getElementById('lName').innerHTML = strname;
document.getElementById('lValue').innerHTML = name.options[name.selectedIndex].value;
}
</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 JavaScript</title>
<script type="text/javascript">
function GetName() {
var name = document.getElementById("ddlName");
var strname = name.options[name.selectedIndex].text;
document.getElementById('lName').innerHTML = strname;
document.getElementById('lValue').innerHTML = name.options[name.selectedIndex].value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%">
<tr>
<td align="right">
Select Name:
</td>
<td>
<asp:DropDownList ID="ddlName" runat="server" onchange="GetName()">
<asp:ListItem Text="Select" Value="0" />
<asp:ListItem Text="Subhash" Value="1" />
<asp:ListItem Text="Rakesh" Value="2" />
<asp:ListItem Text="Satendra" Value="3" />
<asp:ListItem Text="Raju" Value="4" />
<asp:ListItem Text="Sachin" Value="5" />
</asp:DropDownList>
</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>
No comments:
Post a Comment