JS实现下拉框选中不同的项，对应显示不同的信息

实现的效果如下图：

页面代码

下拉框：

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

后台数据绑定代码：

 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 = 0; i < dt.Rows.Count; i++)
 9             {
10                 if (ort.Record("查询语句")> 0)
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 = 0; 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 = 0; i < dt.Rows.Count; i++)
38             {
39                 if (ort.Record("查询二级目录（同上）") > 0)
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 = 0; 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 = 0; i < dt.Rows.Count; i++)
67             {
68                 if (ort.Record("查询语句（同上）") > 0)
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 = 0; 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

目前做的这个只支持二级目录，如果有兴趣的话，可以进行改造。

相关阅读:
SQLite out of order error备忘
 SQLITE_TOOBIG
Android CursorWindow问题备忘
 SQLite3神奇的UNION、UNION ALL与LIMIT组合
 Android Database(SQLite)参数绑定问题初探
 Android SQLite 加入自定义函数
 修改替换/system/framework/framework.jar后重启手机为何没有效果？
手动调用NDK编译HelloWorld
第一篇
 程序题
原文地址：https://www.cnblogs.com/Chaser-Eagle/p/3684714.html