显示/隐藏潜水

showing / hiding Divs

本文关键字：潜水 隐藏 显示      更新时间：2023-09-26

我从数据库和两个div中填充了asp dropdownlist。当我选择下拉列表的任何项目时，我希望隐藏现有的div，如果我选择第一个项目，则显示另一个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>

第页。S：我想在同一个地方展示两个潜水器

提前thx！

Sam

由于使用回发，请将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();");
        }
    }

这是我的下拉列表和divs:

<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>

您的代码看起来不错，只是在id选择器中有一个地方没有给出#。

更改

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

至

$("#cats").hide(); $("#items").show();
相关文章：