实现的效果如下图:

页面代码

下拉框:

<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实现下拉框选中不同的项,对应显示不同的信息的更多相关文章

  1. js设置下拉框选中后change事件无效解决

    下拉框部分代码: <select id="bigType"> <option value="">请选择</option> & ...

  2. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  6. vuetify.js框架 下拉框数据改变DOM原数据未清除

    今天遇到一个奇怪的bug 需求很简单,就是将“引擎能力”下拉框选中的值作为筛选条件传入到“样本类型”下拉框中,默认“样本类型”下拉框显示所有样本类型 看图: 如图所示,功能很简单. 其实还是对vuet ...

  7. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  8. html根据下拉框选中的值修改背景颜色

    错误的写法 <!doctype html><html><head><meta charset="utf-8"><title&g ...

  9. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

随机推荐

  1. K3整理

    当金蝶提示“该模块使用已超过正式版许可最大数!”,需要解决的办法是: 打开K3的“帐套管理”系统,“系统(S)”菜单-“系统使用状况(D)”-系统使用状态窗口,然后点击橡皮擦 删除即可了.

  2. 微软HoloLens虚拟现实可以开发了。

    1.microsoft-hololens-now-available-to-developers 2.http://www.microsoft.com/microsoft-hololens/en-us ...

  3. RegExp子模式- "()"

    读书笔记 把JavaScript权威指南拿出来瞅瞅,正巧看到了第十章 正则表达式的模式匹配 最初接触js的时候,基本上都是在做验证.什么数字验证.命名验证.身份证格式验证.电话号码验证.都是用正则表达 ...

  4. js中的两个数字a,b求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。一共b个数字相加,例如用户输入2,5 s=2+22+222+2222+22222

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. poj3122 binary search 实数区间

    Pie Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14536   Accepted: 4979   Special Ju ...

  6. Lightoj1009 Back to Underworld(带权并查集)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Back to Underworld Time Limit:4000MS      ...

  7. js判断是手机访问还是电脑访问

    <script type="text/javascript">        <!--        //平台.设备和操作系统         var syste ...

  8. C语言一维指针的深入理解

    指针是C语言中广泛使用的一种数据类型.运用指针编程是C语言最主要的风格之一. 利用指针变量可以表示各种数据结构:能很方便地使用数组和字符串:并能象汇编语言一样处理内存地址,从而编出精练而高效的程序.指 ...

  9. BZOJ 2521 最小生成树(最小割)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2521 题意:每次能增加一条边的权值1,求最小代价让一条边保证在最小生成树里 思路:如果两个点中有环, ...

  10. svn: “sqlite: attempt to write a readonly database”

    原因很可能是在svn与本地同步的时候上锁了,可能没注意在svn执行与仓库同步的时候被中断,所以锁文件没有解锁,但是这样的错误,应该不是标题上所说的错误啊??搞不懂了,以前这样的错误,cleanup都有 ...