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

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