JavaScript and DropDownList

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #asp #function #server #web

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript在客户端动态更新下拉列表的方法，无需与服务器进行交互。通过监听下拉菜单的选择变化，根据选择项的不同动态生成新的选项。

JavaScript would be very useful when we want to change web in client. Here i want to write down how to change DropDownList's content without connect to the sever. The code below is the script code.

   function Select_Changed() {
    var temp = document.all('DropDownList1').options[document.all('DropDownList1').selectedIndex].text;
    switch(temp)
    {
          case "GroupA":
                document.all("DropDownList2").options.length = 0;

                 var tOption = document.createElement("Option");
                 tOption.text= "a";
                 tOption.value=document.all("DropDownList2").options.length+1;
                 document.all("DropDownList2").add(tOption);

                var tOption = document.createElement("Option");
                tOption.text= "b";
                tOption.value=document.all("DropDownList2").options.length+1;
                document.all("DropDownList2").add(tOption);
                break;
        default:
                break;
    }

   }
  </script>

You can use document.all("ControlID") to choose the control in the web. The code below will call the JavaScript function.

<asp:DropDownList id="Dropdownlist1" onchange="Select_Changed()" runat="server" >
     <asp:ListItem Value="GroupA">GroupA</asp:ListItem>
     <asp:ListItem Value="GroupB">GroupB</asp:ListItem>
     <asp:ListItem Value="GroupC">GroupC</asp:ListItem>
     <asp:ListItem Value="GroupD">GroupD</asp:ListItem>
</asp:DropDownList>