级联下拉列表（三级）

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script>
   //声明省,一维数组
var provinces = ["广西", "广东", "湖南"]; //直接声明Array
//声明市，二维数组
var cities = [
["桂平", "柳州", "南宁"],
["中山", "广州","珠海"],
["衡阳", "湘潭","长沙"]
];

//声明乡镇，三维数组
var areas = [
[
["桂平1", "桂平2", "桂平3"],
["柳州1", "柳州2", "柳州3"],
["南宁1", "南宁2", "南宁3"]
],
[
["中山1", "中山2", "中山3"],
["广州1", "广州2", "广州3"],
["珠海1", "珠海2", "珠海3"]
],
[
["衡阳1", "衡阳2","衡阳3"],
["湘潭1", "湘潭2","湘潭3"],
["长沙1", "长沙2","长沙3"]
]
]

       //初始化省份
       window.onload=function initProvince(){
           var pro = document.getElementById("province");
           for(var i=0;i<provinces.length;i++){
               pro.add(new Option(provinces[i],i),null);   //i为value值
           }
       }
       var pindex;
       //省份变化，城市也跟着变化
       function changeProvince(){
           var province = document.getElementById("province");
           var ci = document.getElementById("city");
           var country = document.getElementById("countrySide");
           ci.options.length=0;//清空城市列表
           country.options.length=0;//清空乡镇列表
           pindex = province.value;//省份下标
           //哈哈，我爱编代码，如果选择省份为：请选择省份，那么城市和乡镇也跟着改变为请选择。。。
           if(-1==pindex){
              ci.add(new Option("--请选择省份--","-2"),null);
              country.add(new Option("--请选择省份--","-2"),null);
           }
           var city = cities[pindex];//省份对应的城市（默认值）
           var quxu = areas[pindex][0];//城市对应的乡镇

           //城市变化
           for(var i=0;i<city.length;i++){
              ci.add(new Option(city[i],i),null);////i为value值
           }
           //乡镇变化（默认值）
           for(var i=0;i<quxu.length;i++){
              country.add(new Option(quxu[i],i),null);
           }
       }
       //乡镇跟着城市变化
       function changeCity(){
           var countrySide = document.getElementById("countrySide");
           countrySide.options.length=0;//清空乡镇列表
           var cindex = document.getElementById("city").value;//城市的下标
           var count = areas[pindex][cindex];//省份对应的城市所对应的乡镇
           for(var i=0;i<count.length;i++){
              countrySide.add(new Option(count[i],i),null);
           }
       }
   </script>
</head>
<body>
   <h2>省市乡</h2>
   省份选择：<select id="province" onchange="changeProvince()">
      <option value="-1">--请选择省份--</option>
   </select>
   城市选择：<select id="city" onchange="changeCity()">
       <option value="-1">--请选择城市--</option>
   </select>
   乡镇选择：<select id="countrySide">
      <option value="-1">--请选择乡镇--</option>
   </select>
</body>
</html>

未选择时：

选择任意省份，市和乡镇也默认选择了

选择城市，乡镇也跟着改变：

如果选择请选择省份，城市和乡镇也跟着变为请选择。。。

级联下拉列表（三级）

猜你喜欢