Question

我有一个包含两个DropDownLists的常规网络表单：DropDown1＆amp; Dropdown2。两者都不受数据限制，并且使用asp:ListItem标记手动填充。

DropDown1有两个值：购买和购买。当我选择listitem Bought 时，我想使用javascript显示Dropdown2（没有服务器端代码）。由于我还想使用display:none隐藏它，我正在考虑将Dropdown2包含在DIV内。并且第一个DropDownList隐藏/显示Dropdown2。

感谢。

Answer 1

我不是jQuery大师，所以我确信有更简洁的方法可以做到这一点，但以下工作......

<asp:DropDownList runat="server" ID="DropDown1">
    <asp:ListItem Text="To Buy" Value="ToBuy" />
    <asp:ListItem Text="Bought" Value="Bought" />
</asp:DropDownList>
<br/>
<asp:DropDownList runat="server" ID="DropDown2" style="display: none;">
    <asp:ListItem Text="Value 1" Value="val1" />
    <asp:ListItem Text="Value 2" Value="val2" />
    <asp:ListItem Text="Value 3" Value="val3" />
    <asp:ListItem Text="Value 4" Value="val4" />
</asp:DropDownList>

<script type="text/javascript">
    $(function () {
        var dd1 = $get('<%= DropDown1.ClientID %>');
        var dd2 = $get('<%= DropDown2.ClientID %>');

        $(dd1).change(function () {
            if ($(this).val() == 'Bought')
                $(dd2).show();
            else
                $(dd2).hide();
        });
    });
</script>

Answer 2

我最终这样做了。

我的下拉菜单：

<asp:DropDownList ID="DDL_Status" runat="server" onchange="HideDropDown(this);">
    <asp:ListItem Text="Plan" Value="Plan" Selected="True"></asp:ListItem>
    <asp:ListItem Text="Launched" Value="Launched"></asp:ListItem>
</asp:DropDownList>

我的javascript代码：

<script type="text/javascript">
    function HideDropDown(e) {
        var SelectedValue = e.options[e.selectedIndex].value;
        var ddl = document.getElementById("<%=DropDownListPlanStatus.ClientID%>");

        if ((SelectedValue) == "Launched") {
            ddl.style.display = "none";  //hide dropdown
            alert(SelectedValue);
        }
        else {
            ddl.style.display = "block"; //display dropdown
            alert(SelectedValue);
        }
    } 
</script>

从1st DropDownList中选择特定值时显示第二个DropDownList？

2 个答案: