联动菜单

最新推荐文章于 2024-08-26 04:01:33 发布

原创最新推荐文章于 2024-08-26 04:01:33 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

Java Web 专栏收录该内容

9 篇文章

订阅专栏

这是一个html文件，里面包含了JavaScript，用来实现客户端两个下拉列表的操作

该页面中有两个下拉列表，一个里面有几个省，另一个里面有几个城市，当选择某个了特定的省的时候，另一个列表中的城市会自动改变成该省中的各个城市。

这种联动菜单在网页中经常见到，就想湖工大的教务系统，当你查看不同班级的课表时，就回去出现两个下拉列表，当你选中某个专业时，另一个下拉列表中的班级就自动显示与之对应的班级了，以下是代码和界面截图：

<html>

<head>
   <title>联动菜单</title>
   <script language = "javascript" type = "text/javascript">
      function changeCity() {
       	 var province = ["湖南", "河北"];
         var citys = [["长沙", "衡阳"], ["石家庄", "邯郸"]];
         select = document.getElementById("province").value;
         city.length = citys[select-1].length;
         
         for(i = 0; i < citys[select-1].length; i++) {
             city.options[i].value = i + 1;
             city.options[i].text = citys[select-1][i];
	     
         }
      }
   </script>
</head>
<body>
   请选择您所在的城市：
   <select name = "province" id = "province" onchange = "changeCity()">
      <option value = "1" selected>湖南</option>
      <option value = "2">河北</option>
   </select>
   <select name = "city" id = "city">
      <option value = "1" selected>长沙</option>
      <option value = "2">株洲</option>
   </select>
</body>
</html>

可以看出，当选定不同省份时，城市也会与之对应。

实现方法：首先在第一个下拉列表中插入一行‘onchange = "changeCity()"’，即当选定列表中的某个选项就会调用changeCity()函数，而changeCity()函数就在javascript中实现。