实现的效果如下图：

页面代码

下拉框：

<select id="select3" name="select3" onchange="showlist()">
   <option value="-1">--请 选择--</option>
   <option value="1">--主题分类--</option>
   <option value="2">--体裁分类--</option>
   <option value="3">--对象分类--</option>

</select>

下面的分类页面代码：

  1. <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  2.             <tr id="zt" style="display:none">
  3.               <td align="left"><asp:Literal ID="Literal1" runat="server"></asp:Literal></td>
  4.             </tr>
  5.             <tr id="tc" style="display:none">
  6.               <td align="left"><asp:Literal ID="Literal2" runat="server"></asp:Literal></td>
  7.             </tr>
  8.             <tr id="dx" style="display:none">
  9.               <td align="left"><asp:Literal ID="Literal3" runat="server"></asp:Literal></td>
  10.             </tr>
  11.           </table>
  12. <script language="javascript" type="text/javascript">
  13.  function changeShow(str)
  14.  {
  15.   if(document.getElementByIdx('sed'+str).style.display == "none")
  16.   {
  17.    document.getElementByIdx('sed'+str).style.display = "block";
  18.    document.getElementByIdx('topimg'+str).src = "../images/minus.gif";
  19.    document.getElementByIdx('topflor'+str).src = "../images/folderopen.gif";
  20.   }
  21.   else
  22.   {
  23.    document.getElementByIdx('sed'+str).style.display = "none";
  24.    document.getElementByIdx('topimg'+str).src = "../images/plusbottom.gif";
  25.    document.getElementByIdx('topflor'+str).src = "../images/folder.gif";
  26.   }
  27.  }
  28.  function changeShow1(str)
  29.  {
  30.   if(document.getElementByIdx('second'+str).style.display == "none")
  31.   {
  32.    document.getElementByIdx('second'+str).style.display = "block";
  33.    document.getElementByIdx('timg'+str).src = "../images/minus.gif";
  34.    document.getElementByIdx('tflor'+str).src = "../images/folderopen.gif";
  35.   }
  36.   else
  37.   {
  38.    document.getElementByIdx('second'+str).style.display = "none";
  39.    document.getElementByIdx('timg'+str).src = "../images/plusbottom.gif";
  40.    document.getElementByIdx('tflor'+str).src = "../images/folder.gif";
  41.   }
  42.  }
  43.  function changeShow2(str)
  44.  {
  45.   if(document.getElementByIdx('secd'+str).style.display == "none")
  46.   {
  47.    document.getElementByIdx('secd'+str).style.display = "block";
  48.    document.getElementByIdx('tim'+str).src = "../images/minus.gif";
  49.    document.getElementByIdx('tfl'+str).src = "../images/folderopen.gif";
  50.   }
  51.   else
  52.   {
  53.    document.getElementByIdx('secd'+str).style.display = "none";
  54.    document.getElementByIdx('tim'+str).src = "../images/plusbottom.gif";
  55.    document.getElementByIdx('tfl'+str).src = "../images/folder.gif";
  56.   }
  57.  }
  58. </script>
  59. 需要用到的JS代码：
  60. <script language="javascript" type="text/javascript">
  61.         function showlist()
  62.         {
  63.             var o = document.getElementByIdx('select3');
  64.             var strValue = o.options[o.options.selectedIndex].value;
  65.             if(strValue == "1")
  66.             {
  67.                 document.getElementByIdx('zt').style.display = "block";
  68.                 document.getElementByIdx('tc').style.display = "none";
  69.                 document.getElementByIdx('dx').style.display = "none";
  70.             }
  71.             else if(strValue == "2")
  72.             {
  73.                 document.getElementByIdx('zt').style.display = "none";
  74.                 document.getElementByIdx('tc').style.display = "block";
  75.                 document.getElementByIdx('dx').style.display = "none";
  76.             }
  77.             else if(strValue == "-1")
  78.             {
  79.                 document.getElementByIdx('zt').style.display = "none";
  80.                 document.getElementByIdx('tc').style.display = "none";
  81.                 document.getElementByIdx('dx').style.display = "none";
  82.             }
  83.             else
  84.             {
  85.                 document.getElementByIdx('zt').style.display = "none";
  86.                 document.getElementByIdx('tc').style.display = "none";
  87.                 document.getElementByIdx('dx').style.display = "block";
  88.             }
  89.         }
  90.     </script>

后台数据绑定代码：

  1.  #region    主题、体裁、服务对象
  2.          void ztlist()
  3.          {
  4.              数据库操作类实例化 ort ;
  5.              StringBuilder sb = new StringBuilder();
  6.              sb.Append("<div class=\"divcd\">");
  7.              DataTable dt = ort.ExcuteToDataTable("查询语句");
  8.              for (int i = ; i < dt.Rows.Count; i++)
  9.              {
  10.                  if (ort.Record("查询语句")> )
  11.                  {
  12.                      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());
  13.                      sb.Append("<div id=\"sed" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
  14.                      DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
  15.                      for (int j = ; j < dts.Rows.Count; j++)
  16.                      {
  17.                          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 />");
  18.                      }
  19.                      sb.Append("</div></div>");
  20.                      dts.Dispose();
  21.                  }
  22.                  else
  23.                  {
  24.                      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>");
  25.                  }
  26.              }
  27.              dt.Dispose();
  28.              Literal1.Text = sb.ToString();
  29.              ort = null;
  30.          }
  31.          void tclist()
  32.          {
  33.              实例化数据库操作类 ort ;
  34.              StringBuilder sb = new StringBuilder();
  35.              sb.Append("<div class=\"divcd\">");
  36.              DataTable dt = ort.ExcuteToDataTable("查询语句");
  37.              for (int i = ; i < dt.Rows.Count; i++)
  38.              {
  39.                  if (ort.Record("查询二级目录（同上）") > )
  40.                  {
  41.                      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());
  42.                      sb.Append("<div id=\"second" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
  43.                      DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
  44.                      for (int j = ; j < dts.Rows.Count; j++)
  45.                      {
  46.                          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 />");
  47.                      }
  48.                      sb.Append("</div></div>");
  49.                      dts.Dispose();
  50.                  }
  51.                  else
  52.                  {
  53.                      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>");
  54.                  }
  55.              }
  56.              dt.Dispose();
  57.              Literal2.Text = sb.ToString();
  58.              ort = null;
  59.          }
  60.          void fwlist()
  61.          {
  62.              实例化数据库操作类 ort ;
  63.              StringBuilder sb = new StringBuilder();
  64.              sb.Append("<div class=\"divcd\">");
  65.              DataTable dt = ort.ExcuteToDataTable("查询语句");
  66.              for (int i = ; i < dt.Rows.Count; i++)
  67.              {
  68.                  if (ort.Record("查询语句（同上）") > )
  69.                  {
  70.                      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());
  71.                      sb.Append("<div id=\"secd" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">");
  72.                      DataTable dts = ort.ExcuteToDataTable("绑定二级目录");
  73.                      for (int j = ; j < dts.Rows.Count; j++)
  74.                      {
  75.                          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 />");
  76.                      }
  77.                      sb.Append("</div></div>");
  78.                      dts.Dispose();
  79.                  }
  80.                  else
  81.                  {
  82.                      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>");
  83.                  }
  84.              }
  85.              dt.Dispose();
  86.              Literal3.Text = sb.ToString();
  87.              ort = null;
  88.          }
  89.  #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. RAID磁盘阵列原理

    磁盘阵列(Redundant Arrays of independent Disks,RAID),有“价格便宜具有冗余能力的磁盘阵列”之意.原理是利用数组方式来作磁盘组,配合数据分散排列的设计,提升数 ...

  2. SDWebImage实现原理详解

    1)当需要获取网络图片的时候,我们首先需要的便是URL,如果没有URL什么都没有,获得URL后,SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URL相关的图片,如果有则直接 ...

  3. iOS图片设置圆角

    一般我们在iOS开发的过程中设置圆角都是如下这样设置的. imageView.clipsToBounds = YES; [imageView.layer setCornerRadius:]; 这样设置 ...

  4. css实现超连接按钮形式显示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. linux上安装apache以及httpd.conf基本配置

    1.yum安装apache #yum install httpd -y 2.随系统自启动 #chkconfig httpd on 3.开启apache #service httpd start PS: ...

  6. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  7. 数据结构之------C++指针冒泡排序算法

    C++通过指针实现一位数组的冒泡排序算法. 冒泡排序 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法. 代码: /* Name:冒泡排序算法 Copyright:Null ...

  8. POJ 2986 A Triangle and a Circle

    题意:给定一个三角形,以及一个圆的圆心坐标和半径,求圆和三角形的相交面积. 思路: 用三角剖分,三角形上每个线段都变成这个线段与圆心的三角形,然后算出每个三角形与圆的相交面积,然后根据有向面积的正负累 ...

  9. QProcess进程间双向通信

    记得以前写过Linux的C程序, 里面用popen打开一个子进程, 这样可以用read/write和子进程通讯, 而在子进程里则是通过从stdin读和向stdout写实现对父进程的通讯. QProce ...

  10. 《Programming WPF》翻译 第7章 4.转换

    原文:<Programming WPF>翻译 第7章 4.转换 支持高分辨率显示是WPF中的重要样式.这是被部分地支持--强调了可伸缩的向量图,而不是图像.但是,正如使用GDI+和GDI3 ...