javascript - 多个 DropDownLists - 使用 ID 调用单个函数

Question

我有以下代码，它根据选定的单选按钮切换一对 DropDownLists 中的一个的可见性。这段代码有效，但我的问题是我在一个表单上有几组这样的控件。我如何使用单个 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>

Answer 1

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

OnClick="javascript:Toggle(this);"

然后就可以替换

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

通过

function Toggle(list) 
{
    // ...

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

---

顺便说一句，javascript: 伪协议(protocol)是不必要的，正常的 JavaScript 命名约定是函数名应以小写字母开头。我也会对其进行 sanitizer :)