js 城市数据三级联动 [顶][顶][顶]

最新推荐文章于 2024-09-20 20:17:55 发布

会秃头的程序员

最新推荐文章于 2024-09-20 20:17:55 发布

阅读量368

点赞数

分类专栏：三级联动文章标签： js

本文链接：https://blog.csdn.net/kaiil/article/details/123700237

版权

三级联动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript和HTML构建一个响应式的三级联动下拉菜单，通过对象或数组数据动态填充<select>元素，实现省级、市级和区级数据的筛选。通过province、city和distrot的变化触发相应数据更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./area.js"></script>
</head>
<body>
    <select id="province"></select>
    <select id="city"></select>
    <select id="distrot"></select>
    <script>
        //创建一个函数用来判断对象或者数组赋值
       function run(select,data){//参一标签名,参二数据对象名
           select.innerHTML=''; //初始化select的内容为空
           if(data.constructor===Object){//判断当前数据是一个对象
               for(var k in data){//遍历对象
                   var option=document.createElement('option');//创建option标签,
                   option.innerHTML=k;//把数据中的k值赋值给option的内容
                   option.value=k;//把数据中的k值赋值给option的value值
                   select.appendChild(option);//把option标签放在selsct标签里面
               }
           }else if(Array.isArray(data)){//判断当前对象是一个数组
               for(var i in data){//遍历对象
                   for(var k in data[i]){//遍历对象中的i值
                    var option=document.createElement('option');//创建option标签,
                   option.innerHTML=k;//把数据中的k值赋值给option的内容
                   option.value=k;//把数据中的k值赋值给option的value值
                   select.appendChild(option);//把option标签放在selsct标签里面
                   }
               }
           }
       }

       function filter(select){
           var opts=select.options;//把select下所有的option赋值给opts
           for(var i=0;i<opts.length;i++){//循环遍历opts;
               if(opts[i].selected==true){//如果是当前选中的那个标签名
                   return opts[i];//则返回这个标签
               }
           }
       }

       var province_dom=document.querySelector('#province');//查找id为province的标签
       run(province_dom,area);//函数调用
       var pro_opt=filter(province_dom);//把查找的省级标签名返回给一个变量
       var city_data=area[pro_opt.value][0]; //省级下一个的市级数组的value值的第0个
       var city_dom=document.querySelector('#city');//查找id为city的标签
       run(city_dom,city_data);//函数调用
       var city_opt=filter(city_dom);//把查找的市级标签名返回给一个变量
       var distrot_data=city_data[city_opt.value];//省级下一个的市级数组的value值
       var distrot_dom=document.querySelector('#distrot');//查找id为city的标签
       run(distrot_dom,distrot_data);//函数调用

       province_dom.addEventListener('change',function(){//当省级标签被查找时
        var pro_opt=filter(province_dom);        //市级标签要跟着变化
      city_data=area[pro_opt.value][0];
  
       run(city_dom,city_data);
       var city_opt=filter(city_dom);
       distrot_data=city_data[city_opt.value];
  
       run(distrot_dom,distrot_data);
       })

       city_dom.addEventListener('change',function(){//当市级标签被查找时
        var city_opt=filter(city_dom);
       distrot_data=city_data[city_opt.value];       //区级标签要跟着变化
  
       run(distrot_dom,distrot_data);
       })
    </script>
</body>
</html>