September 29, 2016 21:02 by
PeterIn this code snippet, we learn how to get selected value, selected index and selected of asp dropdownlist in JavaScript. First, Create new web application in visual studio.
Now, Add one webform to application. In this tutorial we added WebForm1 in application. And Then Add on DropDownList control to webform. Design webform as follows:
<%@ Page Language="C#" AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs" Inherits="DropDownListJS.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function GetListDetails() {
var param = document.getElementById('ddlColors');
document.getElementById('lblText').innerHTML = param.options[param.selectedIndex].text;
document.getElementById('lblValue').innerHTML = param.options[param.selectedIndex].value;
document.getElementById('lblIndex').innerHTML = param.options[param.selectedIndex].index;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Colors
</td>
<td>
<asp:DropDownList ID="ddlColors" runat="server" onchange="GetListDetails()">
<asp:ListItem Text="Select" Value="0" />
<asp:ListItem Text="Red" Value="11" />
<asp:ListItem Text="Green" Value="22" />
<asp:ListItem Text="Blue" Value="33" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Selecte Index :
</td>
<td>
<label id="lblIndex">
</label>
</td>
</tr>
<tr>
<td>
Selecte Text :
</td>
<td>
<label id="lblText">
</label>
</td>
</tr>
<tr>
<td>
Selecte Value :
</td>
<td>
<label id="lblValue">
</label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Next step, Run application.
Finally, Change the color.
European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.
