layui省市区三级联动

layui省市区的三级联动

    <div class="layui-row layui-col-space10 layui-form" id="VIEW-layui-form-addressUpdate" style="padding:20px;">
         <div class="layui-form-item"  >
              <label class="layui-form-label">收货地址</label>
            <div id="box"></div>
            <div class="layui-input-inline" style="width: 16%; margin-left: 10px">
              <select id="province" name="provice" lay-filter="classify-edit-filter">
              </select>
            </div>
            <div class="layui-input-inline" style="width: 15%; margin-left: 0;">
              <select id="city" name="city" lay-filter="classify-edit-filter">
                <option value="">请选择</option>
              </select>
            </div>

            <div class="layui-input-inline" style="width: 15%; margin-left: 0;">
              <select id="county" name="county" lay-filter="classify-edit-filter">
                <option value="">请选择</option>
              </select>
            </div>
    </div>
      <!-- <script src="/layui/layui.js"></script> -->
      <script src="/layui/jquery-3.3.1.min.js"></script>
      <script>
        layui.use([ "admin",'form', 'layarea'], function (admin,form,layarea) {
          var view=$("#VIEW-layui-form-addressUpdate");
          // var nowPage=layer.index;
          var layer = layui.layer,
             layarea = layui.layarea;
          var admin=parent.layui.admin;
        form.on('select(classify-edit-filter)', function (data) {
            if (data.elem.id === "province") {
            getCityData(data.value, 0);
            } else if (data.elem.id === "city") {
                getCountyData(data.value, 0);
            }
         });
      form.on('submit(addressUpdate-form)', function (data) {
            var field = data.field,
             cityId =  $("#city").val(),
             countyId =  $("#county").val(),
             provinceId = $("#province").val(),
             data =  {
                      "cityId": cityId,
                      "pointOrderId": field.pointOrderId, 
                      "countyId": countyId,
                      "consigneeAddress": field.detailedAddress,
                      "consigneeName": field.consigneeName, 
                      "provinceId": provinceId, 
                      "consigneePhone": field.consigneePhone
                  }
                layer.confirm('确认提交吗？', function (index) {
                    admin.post({
                        url: 'sys/pointOrder/receipt/update',
                        data:data,
                        success: function (res) {
                          // console.log(res)
                           var index = layer.open();
                            if (res.status == 1) {
                              layer.close(index)//关闭当前页 
                                layui.view.tab.refresh();
                                // layer.close(layer.index);
                                layer.closeAll();
                            } else {
                                layer.msg(res.content);
                            }
                        }
                    });
                    layer.close(index);
                });
                
            return false;
        });
      $('.action').click(function(){
        layer.close(index)
      })
      function insertDetails(){
        var id=POPUP_DATA.id;
        
        admin.get({
                    url:'sys/pointOrder/receipt/detail',
                    data:{"pointOrderId":id},
                    success:function(res){
                        if(res.status==1){
                            var o=res.data.result;
                            view.find("input[name=detailedAddress]").val(o.consigneeAddress);
                            view.find("input[name=consigneeName]").val(o.consigneeName);
                            view.find("input[name=consigneePhone]").val(o.consigneePhone);
                            view.find("input[name=pointOrderId]").val(o.pointOrderId);
                            var provinceCode = o.provinceId
                            var cityCode = o.cityId
                            var countyCode = o.countyId
                            getProvinceData(0,110000,provinceCode,cityCode,countyCode)
                        }else{
                            layer.msg(res.content);
                        }
                    }
                });  
          }
      insertDetails();
      console.log('province', $("#province").val())
      function getProvinceData(pId, cId, provinceCode,cityCode,countyCode) {
        var parentid = pId; //0
        var childId = cId; //110000
        admin.get({
          url: 'sys/pointOrder/area/level',
          data: { "level": 1},
          success: function (res) {
            if (res.status == 1) {
              var list = res.data.list;
              var select = document.getElementById('province');
              if (list != null || list.size() > 0) {
                for (var c in list) {
                  var option = document.createElement("option");
                  option.setAttribute("value", list[c].id);
                  option.innerText = list[c].areaName;
                  if (provinceCode === list[c].id) {
                    option.selected = true;
                  }
                  select.appendChild(option)
                }
                if (parentid === 0) {
                  getCityData(provinceCode, 0,cityCode,countyCode);
                } else {
                  getCityData(parentid, cId,cityCode,countyCode);
                }
              };
              form.render('select');

            } else {
              layer.msg(res.content);
            }
          }
        });
      }
      function getCityData(pId, cId,cityCode,countyCode) {
        var parentId = pId; 
        var childId = cId;  
        admin.get({
          url: 'sys/pointOrder/area/parentId',
          data: { "parentId": parentId },
          success: function (res) {
            if (res.status == 1) {
              var list = res.data.list;
              // console.log('list2', list)
              // 每次获得新的数据就讲老的数据清空
              $("#city").html("");
              var select = document.getElementById('city');
              if (cId !== 0) {
                //默认给个空值
                var option = document.createElement("option");
                option.setAttribute("value", "");
                option.innerText = '请选择';
                select.appendChild(option)
              }
              if (list != null || list.size() > 0) {
                for (var c in list) {
                  var option = document.createElement("option");
                  option.setAttribute("value", list[c].id);
                  option.innerText = list[c].areaName;
                  // option.selected = (childId === list[c].id);
                  if (cityCode === list[c].id) {
                    option.selected = true;
                  }
                  select.appendChild(option)
                  if(cityCode) {
                    getCountyData(cityCode, 0,countyCode);
                  } else {
                    getCountyData(list[0].id, 0);
                  }
      
                }
              };
              form.render();
            } else {
              layer.msg(res.content);
            }
          }
        });

      }

      function getCountyData(cityCode, cId,countyCode) {
        var parentId = cityCode
        var childId = cId;
        admin.get({
          url: 'sys/pointOrder/area/parentId',
          data: { "parentId": parentId },
          success: function (res) {
            if (res.status == 1) {
              var list = res.data.list;
              // console.log('list3', list)
              // 每次获得新的数据就讲老的数据清空
              $("#county").html("");
              var select = document.getElementById('county');
              if (cId !== 0) {
                //默认给个空值
                var option = document.createElement("option");
                option.setAttribute("value", "");
                option.innerText = '请选择';
                select.appendChild(option)
              }
              if (list != null || list.size() > 0) {
                for (var c in list) {
                  var option = document.createElement("option");
                  option.setAttribute("value", list[c].id);
                  option.innerText = list[c].areaName;
                  // option.selected = (childId === list[c].id);
                  if (countyCode === list[c].id) {
                    option.selected = true;
                  }
                  select.appendChild(option)
                }
              };
              form.render();
            } else {
              layer.msg(res.content);
            }
          }
        });
      }
    });
</script>