DropDownList Add Client Drop down Event Action
- 2021-07-06 10:40:29
- OfStack
If you want to add a client-side drop-down event to an DropDownList server control, you can force it to add an onchange event, although there is no hint for this method in the control. After adding this event, you can't achieve your goal. You should set the AutoPostBack property to false to prevent it from posting back background events.
Here's the code to share:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DropDownList Add a client drop-down event </title>
<script type="text/javascript">
function getDropDownList() {
var ddl1 = document.getElementById("<%=ddl1.ClientID%>");
var text = ddl1.options[ddl1.options.selectedIndex].text; // Get text Value
var value = ddl1.value; // Get value Value
alert("Text:" + ddl1.options[ddl1.options.selectedIndex].text + ", Value:" + ddl1.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="false" onchange="getDropDownList();">
<asp:ListItem Text="T1" Value="V1" Selected="True"></asp:ListItem>
<asp:ListItem Text="T2" Value="V2"></asp:ListItem>
<asp:ListItem Text="T3" Value="V3"></asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
Summarize 1, that is to say, if you want to add a client drop-down event to the DropDownList drop-down box, you must do two steps: 1 is to add a forced onchange event, and 2 is to set the AutoPostBack attribute to false, which is as simple as that!