JS实现下拉框选中不同的项，对应显示不同的信息
实现的效果如下图：
 |
 |
 |
页面代码
下拉框：
<select id="select3" name="select3" onchange="showlist()">
<option value="-1">--请 选择--</option>
<option value="1">--主题分类--</option>
<option value="2">--体裁分类--</option>
<option value="3">--对象分类--</option>
</select>
下面的分类页面代码：
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr id="zt" style="display:none">
<td align="left"><asp:Literal ID="Literal1" runat="server"></asp:Literal></td>
</tr>
<tr id="tc" style="display:none">
<td align="left"><asp:Literal ID="Literal2" runat="server"></asp:Literal></td>
</tr>
<tr id="dx" style="display:none">
<td align="left"><asp:Literal ID="Literal3" runat="server"></asp:Literal></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function changeShow(str)
{
if(document.getElementByIdx('sed'+str).style.display == "none")
{
document.getElementByIdx('sed'+str).style.display = "block";
document.getElementByIdx('topimg'+str).src = "../images/minus.gif";
document.getElementByIdx('topflor'+str).src = "../images/folderopen.gif";
}
else
{
document.getElementByIdx('sed'+str).style.display = "none";
document.getElementByIdx('topimg'+str).src = "../images/plusbottom.gif";
document.getElementByIdx('topflor'+str).src = "../images/folder.gif";
}
}
function changeShow1(str)
{
if(document.getElementByIdx('second'+str).style.display == "none")
{
document.getElementByIdx('second'+str).style.display = "block";
document.getElementByIdx('timg'+str).src = "../images/minus.gif";
document.getElementByIdx('tflor'+str).src = "../images/folderopen.gif";
}
else
{
document.getElementByIdx('second'+str).style.display = "none";
document.getElementByIdx('timg'+str).src = "../images/plusbottom.gif";
document.getElementByIdx('tflor'+str).src = "../images/folder.gif";
}
}
function changeShow2(str)
{
if(document.getElementByIdx('secd'+str).style.display == "none")
{
document.getElementByIdx('secd'+str).style.display = "block";
document.getElementByIdx('tim'+str).src = "../images/minus.gif";
document.getElementByIdx('tfl'+str).src = "../images/folderopen.gif";
}
else
{
document.getElementByIdx('secd'+str).style.display = "none";
document.getElementByIdx('tim'+str).src = "../images/plusbottom.gif";
document.getElementByIdx('tfl'+str).src = "../images/folder.gif";
}
}
</script>
需要用到的JS代码：
<script language="javascript" type="text/javascript">
function showlist()
{
var o = document.getElementByIdx('select3');
var strValue = o.options[o.options.selectedIndex].value;
if(strValue == "1")
{
document.getElementByIdx('zt').style.display = "block";
document.getElementByIdx('tc').style.display = "none";
document.getElementByIdx('dx').style.display = "none";
}
else if(strValue == "2")
{
document.getElementByIdx('zt').style.display = "none";
document.getElementByIdx('tc').style.display = "block";
document.getElementByIdx('dx').style.display = "none";
}
else if(strValue == "-1")
{
document.getElementByIdx('zt').style.display = "none";
document.getElementByIdx('tc').style.display = "none";
document.getElementByIdx('dx').style.display = "none";
}
else
{
document.getElementByIdx('zt').style.display = "none";
document.getElementByIdx('tc').style.display = "none";
document.getElementByIdx('dx').style.display = "block";
}
}
</script>
后台数据绑定代码：
#region 主题、体裁、服务对象
void ztlist()
{
数据库操作类实例化 ort ;
StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"divcd\">");
DataTable dt = ort.ExcuteToDataTable("查询语句");
for (int i = ; i < dt.Rows.Count; i++)
{
if (ort.Record("查询语句")> )
{
sb.Append("<div id=\"top" + i.ToString() + "\" class=\"top0\"><img id=\"topimg" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" onclick=\"changeShow('"+i.ToString()+"')\"/><img id=\"topflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" onclick=\"changeShow('"+i.ToString()+"')\"/>" + dt.Rows[i]["d_type"].ToString());
sb.Append("<div id=\"sed" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
for (int j = ; j < dts.Rows.Count; j++)
{
sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?tid="+dts.Rows[j]["d_id"].ToString()+"\">"+dts.Rows[j]["d_type"].ToString()+"</a><br />");
}
sb.Append("</div></div>");
dts.Dispose();
}
else
{
sb.Append("<div id=\"top" + i.ToString() + "\"><img id=\"topimg" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"topflor"+i.ToString()+"\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?oid="+dt.Rows[i]["d_id"].ToString()+"\">" + dt.Rows[i]["d_type"].ToString()+"</a></div>");
}
}
dt.Dispose();
Literal1.Text = sb.ToString();
ort = null;
}
void tclist()
{
实例化数据库操作类 ort ;
StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"divcd\">");
DataTable dt = ort.ExcuteToDataTable("查询语句");
for (int i = ; i < dt.Rows.Count; i++)
{
if (ort.Record("查询二级目录（同上）") > )
{
sb.Append("<div id=\"first" + i.ToString() + "\" class=\"top0\"><img id=\"timg" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" onclick=\"changeShow1('" + i.ToString() + "')\"/><img id=\"tflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" onclick=\"changeShow1('" + i.ToString() + "')\"/>" + dt.Rows[i]["g_type"].ToString());
sb.Append("<div id=\"second" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
for (int j = ; j < dts.Rows.Count; j++)
{
sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?ttid=" + dts.Rows[j]["g_id"].ToString() + "\">" + dts.Rows[j]["g_type"].ToString() + "</a><br />");
}
sb.Append("</div></div>");
dts.Dispose();
}
else
{
sb.Append("<div id=\"first" + i.ToString() + "\"><img id=\"timg" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"tflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?toid=" + dt.Rows[i]["g_id"].ToString() + "\">" + dt.Rows[i]["g_type"].ToString() + "</a></div>");
}
}
dt.Dispose();
Literal2.Text = sb.ToString();
ort = null;
}
void fwlist()
{
实例化数据库操作类 ort ;
StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"divcd\">");
DataTable dt = ort.ExcuteToDataTable("查询语句");
for (int i = ; i < dt.Rows.Count; i++)
{
if (ort.Record("查询语句（同上）") > )
{
sb.Append("<div id=\"fit" + i.ToString() + "\" class=\"top0\"><img id=\"tim" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" onclick=\"changeShow2('" + i.ToString() + "')\"/><img id=\"tfl" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" onclick=\"changeShow2('" + i.ToString() + "')\"/>" + dt.Rows[i]["s_type"].ToString());
sb.Append("<div id=\"secd" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
for (int j = ; j < dts.Rows.Count; j++)
{
sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?ftid=" + dts.Rows[j]["s_id"].ToString() + "\">" + dts.Rows[j]["s_type"].ToString() + "</a><br />");
}
sb.Append("</div></div>");
dts.Dispose();
}
else
{
sb.Append("<div id=\"fit" + i.ToString() + "\"><img id=\"tim" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"tfl" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?foid=" + dt.Rows[i]["s_id"].ToString() + "\">" + dt.Rows[i]["s_type"].ToString() + "</a></div>");
}
}
dt.Dispose();
Literal3.Text = sb.ToString();
ort = null;
}
#endregion
目前做的这个只支持二级目录，如果有兴趣的话，可以进行改造。
JS实现下拉框选中不同的项，对应显示不同的信息的更多相关文章
- js设置下拉框选中后change事件无效解决
下拉框部分代码: <select id="bigType"> <option value="">请选择</option> & ...
- js,jquery获取下拉框选中的option
js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- vuetify.js框架 下拉框数据改变DOM原数据未清除
今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- html根据下拉框选中的值修改背景颜色
错误的写法 <!doctype html><html><head><meta charset="utf-8"><title&g ...
- JS 实现下拉框去重
JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...
随机推荐
- (转)SQL语句中的N'xxxx'是什么意思
SQL语句中的N'xxxx'是什么意思 我们在一些sql存储过程,触发器等中经常会见到类似 N'xxxx' 是什么意思? 例如:if exists (select * from dbo.sysobje ...
- MVC与三层架构的关系
- FineUI布局应用(二)
一.FineUI页面布局分为 1.Fit布局 <f:Panel ID="Panel1" Title="布局Fit(Layout=Fit)" runat=& ...
- textField:shouldChangeCharactersInRange:replacementString:
http://blog.csdn.net/mamong/article/details/44964801
- Maybe I go too extreme
昨天拖着一个没睡好的身体去面试了2家公司 被问到Collection的子集的时候顿时傻了一会,明明很简单的问题一时就想不起来了,哈哈.果然做it的人身体要顾好,状态太差了. 发现了一个问题,其实也是早 ...
- poj3090欧拉函数求和
E - (例题)欧拉函数求和 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:65536KB ...
- [Leetcode] Remove Duplicates From Sorted Array II (C++)
题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 新闻动态切换图片html(flash)
效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> < ...
- AFNetworking了解
AFNetworking了解 AFNetworking是一个讨人喜欢的网络库,适用于iOS以及Mac OS X. 它构建于在NSURLConnection, NSOperation, 以及其他熟悉 ...