JS省市区三级联动

index-cao

已于 2022-03-11 02:25:17 修改

阅读量1.2k

点赞数

文章标签： js

于 2022-03-11 02:23:04 首次发布

本文链接：https://blog.csdn.net/asdhoh/article/details/123415456

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div>
           <select name="province">
               <option>=请选择省=</option>
           </select>
           <select name="city">
               <option>=请选择市=</option>
           </select>
           <select name="area">
               <option>=请选择区=</option>
           </select>
       </div>
       <script type="text/javascript">
       //省市库
           var cityku = [
           {

           name: "浙江",
           child: [
           {

           name: "杭州市",
           child: [
           {

           name: "上城区"
           },
           {

           name: "西湖区"
           }
           ]
           },
           {

           name: "宁波市",
           child: [
           {

           name: "镇海区"
           },
           {

           name: "海曙区"
           }
           ]
           }
           ]
           },
           {

           name: "安徽省",
           child: [
           {

           name: "宣城市",
           child: [
           {

           name: "宣州区"
           },
           {

           name: "宁国"
           }
           ]
           },
           {

           name: "合肥市",
           child: [
           {

           name: "合肥区"
           },
           {
           name: "合肥区"
           }
           ]
           }
           ]
           },
           ]
       //获取省市区第一个option
           var province = document.getElementsByName("province")[0];
           var city = document.getElementsByName("city")[0];
           var area = document.getElementsByName("area")[0];
       //保存省索引
           var provIndex = 0;
       //将省的名称插入option
       for(var i=0;i<cityku.length;i++){
           var newoption = new Option(cityku[i].name,i);
           //这里的语句结束千万不要加分号不然不能获取索引
           province.appendChild(newoption)
       }
       //给省下拉点击函数
       province.οnchange=function(){
           city.options.length = 1;
           area.options.length = 1;
           for(var i=0;i<cityku[this.value].child.length;i++){
               var newoption = new Option(cityku[this.value].child[i].name,i);
               city.appendChild(newoption)
           }
           provIndex = this.value;
       }
       //给省下拉点击函数
       city.οnchange=function(){
           area.options.length = 1;
           for(var i=0;i<cityku[provIndex].child[this.value].child.length;i++){
               var newoption = new Option(cityku[provIndex].child[this.value].child[i].name,i);
               area.appendChild(newoption)
           }
       }
       </script>

   </body>
</html>