基于 layui 和 高德地图 实现 省市区三级联动

基于 layui 和 高德地图area.js 实现 省市区三级联动

1. 页面

   <style>
      //防止下拉框被其他表单遮盖
       #address_div {
           position: relative;
           z-index: 9999;
       }
   </style>
   
   <div class="layui-form-item" id="address_div">
       <label class="layui-form-label layui-required">收货地区</label>
       <input name="provinceName" placeholder="" type="hidden"
              class="layui-input" id="provinceName"/>
       <input name="cityName" placeholder="" type="hidden"
              class="layui-input"  id="cityName"/>
       <input name="areaName" placeholder="" type="hidden"
              class="layui-input"  id="areaName"/>
       <div class="layui-input-inline">
           <select name="provinceId" id="provinceSelect" lay-filter="provinceSelect" lay-verify="required">
               <option value="">请选择省</option>
           </select>
       </div>
       <div class="layui-input-inline">
           <select name="cityId" id="citySelect" lay-filter="citySelect" lay-verify="required">
               <option value="">请选择市</option>
           </select>
       </div>
       <div class="layui-input-inline">
           <select name="areaId" id="areaSelect" lay-filter="areaSelect" lay-verify="required">
               <option value="">请选择县/区</option>
           </select>
       </div>
   </div>
   <div class="layui-form-item">
       <label class="layui-form-label layui-required">详细地址</label>
       <div class="layui-input-block">
           <input name="address" placeholder="请输入收货人详细地址" type="text"
                  class="layui-input"
                  lay-verify="required" required/>
       </div>
   </div>
   

2. js

   //省市区下拉渲染
   function areaSelect(provinceId,cityId,areaId) {
       var citys = getCity();//获取全部省市区（基于高德地图area.js）
       if(citys){
           citys.forEach((province, index) => {
               if(index == 0 && provinceId == null){//没有省份则默认显示第一个
                   $('#provinceSelect').append(new Option(province.text,province.value,null,true));//添加省级下拉选项
                   $('#provinceId').val(province.value);
                   $('#provinceName').val(province.text);
               }else{
                   if(province.value == provinceId){
                       $('#provinceSelect').append(new Option(province.text,province.value,null,true));//添加省级下拉选项
                   }else{
                       $('#provinceSelect').append(new Option(province.text,province.value));//添加省级下拉选项
                   }
               }
           });
           if(provinceId == null && cityId == null && areaId == null){//市、区县显示第一个省份
               if(citys[0].children){
                   var cityss = citys[0].children;
                   cityss.forEach((city, n) => {
                       if(n == 0 && cityId == null){
                           $('#citySelect').append(new Option(city.text,city.value,null,true));//添加市级下拉选项
                           $('#cityId').val(city.value);
                           $('#cityName').val(city.text);
                       }else{
                           $('#citySelect').append(new Option(city.text,city.value));//添加市级下拉选项
                       }
                       if(city.children){
                           var areas = city.children;
                           areas.forEach((area, k) => {
                               if(k == 0 && provinceId == null){
                                   $('#areaSelect').append(new Option(area.text,area.value,null,true));//添加县级下拉选项
                                   $('#areaId').val(area.value);
                                   $('#areaName').val(area.text);
                               }else{
                                   $('#areaSelect').append(new Option(area.text,area.value));//添加县级下拉选项
                               }
                           });
                       }
                   });
               }
           }else{
               citys.forEach((province, index) => {//市、区县的回显的操作
                   if(province.value == provinceId){
                       if(province.children){
                           var cityss = province.children;
                           cityss.forEach((city, n) => {
                               if(city.value == cityId){
                                   $('#citySelect').append(new Option(city.text,city.value,true,true));//添加市级下拉选项
                                   if(city.children){
                                       var areas = city.children;
                                       areas.forEach((area, k) => {
                                           if(area.value == areaId){
                                               $('#areaSelect').append(new Option(area.text,area.value,true,true));//添加县级下拉选项
                                           }else{
                                               $('#areaSelect').append(new Option(area.text,area.value));//添加县级下拉选项
                                           }
                                       });
                                   }
                               }else{
                                   $('#citySelect').append(new Option(city.text,city.value));//添加市级下拉选项
                               }
                           });
                       }
                   }
               });
           }
           form.render('select');  //类目渲染 把内容加载进去
   
           //点击省级下拉
           form.on('select(provinceSelect)', function (data) {
               $("#citySelect").html("");
               $("#areaSelect").html("");
               //遍历显示市级、县级下拉框
               citys.forEach((province, index) => {
                   if(province.value == data.value){
                       $('#provinceId').val(province.value);
                       $('#provinceName').val(province.text);
                       if(province.children){
                           var cityss = province.children;
                           var cityId;
                           cityss.forEach((city, n) => {
                               if(n == 0){
                                   $('#citySelect').append(new Option(city.text,city.value,true,true));//添加市级下拉选项
                                   $('#cityId').val(city.value);
                                   $('#cityName').val(city.text);
                                   cityId = city.value
                               }else{
                                   $('#citySelect').append(new Option(city.text,city.value));//添加市级下拉选项
                               }
                               if(city.value == cityId){
                                   if(city.children){
                                       var areas = city.children;
                                       areas.forEach((area, k) => {
                                           if(k == 0){
                                               $('#areaSelect').append(new Option(area.text,area.value,true,true));//添加县级下拉选项
                                               $('#areaId').val(area.value);
                                               $('#areaName').val(area.text);
                                           }else{
                                               $('#areaSelect').append(new Option(area.text,area.value));//添加县级下拉选项
                                           }
                                       });
                                   }
                               }
                           });
                       }
                   }
               });
               form.render('select');
           });
   
           //点击市级下拉
           form.on('select(citySelect)', function (data) {
               $("#areaSelect").html("");
               //遍历显示市级、县级下拉框
               citys.forEach((province, index) => {
                   if(province.children){
                       var cityss = province.children;
                       cityss.forEach((city, n) => {
                           if(city.children && city.value == data.value){
                               $('#cityId').val(city.value);
                               $('#cityName').val(city.text);
                               var areas = city.children;
                               areas.forEach((area, k) => {
                                   if(k == 0){
                                       $('#areaSelect').append(new Option(area.text,area.value,true,true));//添加县级下拉选项
                                       $('#areaId').val(area.value);
                                       $('#areaName').val(area.text);
                                   }else{
                                       $('#areaSelect').append(new Option(area.text,area.value));//添加县级下拉选项
                                   }
                               });
                           }
                       });
                   }
               });
               form.render('select');
           });
   
           //点击县级下拉
           form.on('select(areaSelect)', function (data) {
               citys.forEach((province, index) => {
                   if(province.children){
                       var cityss = province.children;
                       cityss.forEach((city, n) => {
                           if(city.children){
                               var areas = city.children;
                               areas.forEach((area, k) => {
                                   if(area.value == data.value){
                                       $('#areaId').val(area.value);
                                       $('#areaName').val(area.text);
                                   }
                               });
                           }
                       });
                   }
               });
           });
       }
   }
   

使用

在需要渲染的页面调用方法即可。数据回显需要传入省市区编码

areaSelect() //初始化
areaSelect(data.provinceId,data.cityId,data.areaId); //数据回显