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

最新推荐文章于 2023-06-09 17:13:45 发布

casonit

最新推荐文章于 2023-06-09 17:13:45 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 数据库 java ViewUI

原文链接：http://www.cnblogs.com/Chaser-Eagle/p/3684714.html

本文介绍了一个JS实现的功能，通过下拉框（select）的不同选项选择，能够显示对应的不同信息。下拉框包含三个选项：主题分类、体裁分类和对象分类。当用户选择任一选项时，会触发onchange事件，调用showlist()函数来更新显示内容。目前的实现仅支持二级目录，但可以进一步扩展以支持更多层级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果如下图：

页面代码

下拉框：

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

最低0.47元/天解锁文章

200万优质内容无限畅学