显示/隐藏潜水
本文关键字:潜水 隐藏 显示 | 更新日期: 2024-09-23 13:14:13
我从数据库和两个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();