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

原文地址：JS实现下拉框选中不同的项，对应显示不同的信息 作者：孤独行者

实现的效果如下图：

 

 

页面代码

下拉框：

<select id="select3" name="select3" οnchange="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";
               

转载于:https://www.cnblogs.com/liuzhuqing/archive/2013/05/31/7480528.html