Question

我有从数据库和两个div填充的asp下拉列表。我希望当我选择下拉列表中的任何项目来隐藏现有div并显示另一个时，如果我选择相反的第一个项目。这是我的代码：

<asp:DropDownList runat="server" 
                    ID="brandsList" 
                    AutoPostBack="True" 
                    DataSourceID="brandsDataSource" 
                    DataTextField="BrandName" 
                    DataValueField="BrandId" 
                    OnDataBound="brandsList_DataBound" 
                    OnSelectedIndexChanged="brandsList_SelectedIndexChanged" 
                    ClientIDMode="Static">
</asp:DropDownList>

我的下拉列表的C＃代码：

if (brandsList.Items.Count > 0)
        {
            brandsList.Items.Insert(0, " * SELECT BRAND *");
            brandsList.Items[0].Value = "1";
            brandsList.SelectedIndex = 0;
        }

javascript代码：

<script type="text/javascript">
        $(function () {
            $("<%=brandsList.ClientID%>").change(function () {
                ToggleDropdown();
            });
            ToggleDropdown();
        });
        function ToggleDropdown(){
            if ($("<%=brandsList.ClientID %>").val() != "1") {
                $("#cats").hide(); $("items").show();
            }
            else { $("#cats").show();$("#items").hide(); }
        };
    </script>

P.S：我想在同一个地方显示两个div

提前thx！

萨姆

Answer 1

由于您使用的是回发，因此请将div设置为runat='server'设置条件以显示或隐藏div或onSelectedIndexChanged事件。当然，这可能不是最好的方式，它在之前的项目中对我有用。

cats.Attributes["style"] = "display: block;";
items.Attributes["style"] = "display: none;";

编辑：

我之前做过一些事情，这不是jquery，而是JavaScript。

首先，您需要在页面加载事件中添加内容，并且还要取消AutoPostBack='true'，如果您依赖回发，请忽略它:(

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            ddlTest.Attributes.Add("onchange", "test();");
        }
    }

这是我的下拉列表和div：

<asp:DropDownList runat="server" ID="ddlTest">
 <asp:ListItem>default</asp:ListItem>
 <asp:ListItem Value="1">20</asp:ListItem>
 <asp:ListItem Value="2">55</asp:ListItem>
 </asp:DropDownList>
<div id="items">
<p>
    This is Div items
</p>
</div>
<div id="cats">
<p>
    This is Div Cats
</p>
</div>

这是JavaScript

<script type="text/javascript">

    function ShowOrHideDiv(id) {
        switch(id)
        {
            case "1":
                DisplayDiv("cats");
                HideDiv("items");
                break;
            case "2":
                DisplayDiv("items");
                HideDiv("cats");
                break;
            default:
                DisplayDiv("items");
                DisplayDiv("cats");
        }

    }

    function DisplayDiv(ctrl) {
        var div = document.getElementById(ctrl);

        div.style.display = 'block';
    }

    function HideDiv(ctrl) {
        var div = document.getElementById(ctrl);

        div.style.display = 'none';
    }

    function test(){
    var testDDL = document.getElementById('<%=ddlTest.ClientID%>');
    var value = testDDL.options[testDDL.selectedIndex].value;

    ShowOrHideDiv(value);
    }

</script>

Answer 2

除了您没有在ID选择器中提供#的地方外，您的代码似乎没问题。

更改

$("#cats").hide(); $("items").show();

要

$("#cats").hide(); $("#items").show();

显示/隐藏Div

2 个答案: