如何在asp.net的另一个下拉框中进行选择后显示隐藏的下拉框?

时间:2013-09-25 15:56:37

标签: c# javascript html asp.net .net

我一直有很多问题要解决这个问题,所以我在页面上有两个下拉菜单,另一个我想先隐藏的内容。在第二个下拉列表(任何选择)中进行选择后,我希望第三个下拉列表及其Label变为可见。它们都连接到数据库。我以一种简单的方式重新创建了代码的这一方面,以提供视觉效果。  我在网上寻求帮助。我是.NET的新手,并且从未使用过jquery或ajax,如果有可能我只想在C#中使用它。如果你建议jquery请详细解释。此时CS页面几乎是空的。任何帮助表示赞赏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Dropdowns</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>



        <asp:DropDownList ID="ddlManu" runat="server" AutoPostBack="True" 
            DataSourceID="SqlDataSource1" DataTextField="Field1" DataValueField="ID" >
        </asp:DropDownList>    
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" 
            SelectCommand="SELECT [Version] FROM [ProductVersion]"
            DataSourceMode="DataReader">
            </asp:SqlDataSource>


        <asp:DropDownList ID="ddlProduct" runat="server" 
            DataSourceID="SqlDataSource2" DataTextField="Field1" DataValueField="ID" 
            AutoPostBack="True"  >
        </asp:DropDownList>

        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" 
            ProviderName="<%$ ConnectionStrings:ConnectionString2.ProviderName %>" 
            SelectCommand="SELECT [ID], [Field1], [Field2],[FKID] FROM [MSProducts] 
            WHERE FKID = @ID" DataSourceMode="DataReader">

            <SelectParameters>
            <asp:ControlParameter ControlID="ddlManu" Name="ID"
            PropertyName="SelectedValue" DefaultValue="" />
            </SelectParameters>
        </asp:SqlDataSource>

        <br />
        <asp:Label ID="Label1" runat="server" Text="Category1:"></asp:Label>
        <asp:DropDownList ID="ddlPop" runat="server" DataSourceID="SqlDataSource1">
        </asp:DropDownList>
        <br />
        <br />
        <br />
                    <br />
                    <br />
                    <br /> 

    </form>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

首先,将您的第三个dd设置为可见的false:

<asp:DropDownList ID="ddlPop" runat="server" Visible="false"></asp:DropDownList>

然后,在第二个dd的方法OnSelectedIndexChanged上,执行:

protected void ddlProduct_SelectedIndexChanged(object sender, EventArgs e)
{
    ddlPop.Visible = true;
}

我使用jquery创建了一个小样本来做同样的事情。 但请注意,要使此方法生效,您需要为控件禁用回发。

http://jsfiddle.net/Gys5Y/1/

答案 1 :(得分:1)

像这样重写你的代码

<form id="form1" runat="server">
<div>



    <asp:DropDownList ID="ddlManu" runat="server" AutoPostBack="True" 
        DataSourceID="SqlDataSource1" DataTextField="Field1" DataValueField="ID" >
    </asp:DropDownList>    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" 
        SelectCommand="SELECT [Version] FROM [ProductVersion]"
        DataSourceMode="DataReader">
        </asp:SqlDataSource>


    <asp:DropDownList ID="ddlProduct" runat="server" 
        DataSourceID="SqlDataSource2" DataTextField="Field1" DataValueField="ID" 
       onselectedindexchanged="ddlProductSelectedIndexChanged" autopostback="true">
    </asp:DropDownList>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" 
        ProviderName="<%$ ConnectionStrings:ConnectionString2.ProviderName %>" 
        SelectCommand="SELECT [ID], [Field1], [Field2],[FKID] FROM [MSProducts] 
        WHERE FKID = @ID" DataSourceMode="DataReader">

        <SelectParameters>
        <asp:ControlParameter ControlID="ddlManu" Name="ID"
        PropertyName="SelectedValue" DefaultValue="" />
        </SelectParameters>
    </asp:SqlDataSource>

    <br />
    <asp:Label ID="Label1" runat="server" Text="Category1:" visible="false"></asp:Label>
    <asp:DropDownList ID="ddlPop" runat="server" DataSourceID="SqlDataSource1" visible="false">
    </asp:DropDownList>
    <br />
    <br />
    <br />
                <br />
                <br />
                <br /> 

</form>

然后在你的代码上

protected void ddlProductSelectedIndexChanged(object sender, EventArgs e){
ddlPop.Visible = true;
Label1.Visible=true;}

答案 2 :(得分:1)

最好在客户端执行此功能。只需为你的下拉列表中的onchange事件分配一个javascript函数,并输入类似$(“#myddl”)。css(“display”,“none”);进去。 通过这种方式,您将避免向服务器发出无用的请求,您的应用程序将更快地运行。