代码之家  ›  专栏  ›  技术社区  ›  IrishChieftain

多个DropDownList-使用ID调用单个函数

  •  2
  • IrishChieftain  · 技术社区  · 14 年前

    我有下面的代码,它根据所选的单选按钮切换一对DropDownlist中的一个的可见性。这段代码可以工作,但我的问题是在一个表单上有几组这样的控件。如何使用单个javascript toggle()函数,而不考虑触发它的RadioButtonList的ID?

    function Toggle() 
    {
        var list = document.getElementById("produceDDL");
        var inputs = list.getElementsByTagName("input");
    
        var selected;
        for (var i = 0; i < inputs.length; i++) 
        {
            if (inputs[i].checked) 
            {
                selected = inputs[i];
                break;
            }
        }
    
        if (selected.value == 'Vegetables') 
        {
            div1.style.display = 'none';
            div2.style.display = 'block';
        }
        else 
        {
            div1.style.display = 'block';
            div2.style.display = 'none';
        }
    }
    
        <asp:radiobuttonlist ID="produceDDL" OnClick="javascript:Toggle();" 
            RepeatDirection="Horizontal" runat="server">
            <asp:ListItem Selected="True">Fruit</asp:ListItem>
            <asp:ListItem>Vegetables</asp:ListItem>
        </asp:radiobuttonlist>
    
        <div id="div1">
            <asp:DropDownList ID="fruitDDL" Width="120" runat="server">
                <asp:ListItem>Select</asp:ListItem>
                <asp:ListItem>Apples</asp:ListItem>
                <asp:ListItem>Oranges</asp:ListItem>
            </asp:DropDownList>
        </div>
    
        <div id="div2" style="display:none;">
            <asp:DropDownList ID="vegDDL" Width="120" runat="server">
                <asp:ListItem>Select</asp:ListItem>
                <asp:ListItem>Onions</asp:ListItem>
                <asp:ListItem>Potatoes</asp:ListItem>
            </asp:DropDownList>
        </div>
    
    1 回复  |  直到 14 年前
        1
  •  1
  •   BalusC    14 年前

    让单选按钮列表本身作为函数参数传递。

    OnClick="javascript:Toggle(this);"
    

    那你就可以换了

    function Toggle() 
    {
        var list = document.getElementById("produceDDL");
        // ...
    

    通过

    function Toggle(list) 
    {
        // ...
    

    这样你就可以使用 OnClick="javascript:Toggle(this);" 在其他单选按钮列表中。


    顺便说一下, javascript: 伪协议是不必要的,通常的JavaScript命名约定是函数名应该以小写字母开头。我也会消毒的:)