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!


Related articles: