jquery通过后端请求的区域四级联动

1.大致思路

• 一开始页面加载根据省市区街道四个区域码设置select默认选中状态

• 当省级select改变时，后面三级select重新请求

• 当市级select改变时， 后面两级select重新请求

• 以此类推

2.代码解释

<1> 变量province、city、district 、district 、分别对应 省 市 区 街道 四个select

<2> 对象getArea有五个方法

• emptySelect(index): 清空 第(index)个select之后 几个select的内容（避免重复追加，如：省级select改变，市 区 街道三个select均要清空）

• init(provinceCode, cityCode, districtCode, townCode): 设置四个select默认选中的状态(先从后端获取数据再选中)

• provinceChange():当省级select改变时，市 区 街道重新发起请求

• cityChange():当市级select改变时，区 街道重新发起请求

• districtChange():当市级select改变时， 街道重新发起请求

var province = $("#province");var city = $("#city");var district = $("#district"); 
var district = $("#town"); 
var getArea = { 
  emptySelect: function(index){ 
    for (var i=index; i<4;i++){ 
      $($(".areaSelect")[i]).empty();
    }        
  }, 
  init:async function (provinceCode, cityCode, districtCode, townCode) { 
         await $.post('/system/area/province',function (res) {                for (var local in res) {
                    province.append("<option value=" + res[local].provinceCode + ">" + res[local].provinceName + "</option>");
                }                if (provinceCode != "") {                    console.log("provinceCode"+provinceCode);                    console.log($("#province option[value='330000']"))
                    $("#province option[value='"+provinceCode+"']").attr("selected", true);
                }
          });            await $.post('/system/area/city?provinceCode='+provinceCode,function (res) {                console.log("province select"+province.val());                for (var local in res) {
                    city.append("<option value=" + res[local].cityCode + ">" + res[local].cityName + "</option>");
                }                if (cityCode != "") {                    console.log("cityCode"+cityCode);
                    $("#city option[value='"+cityCode+"']").attr("selected", true);
                }
            });            await $.post('/system/area/district?cityCode='+cityCode,function (res) {                console.log("city select"+city.val());                for (var local in res) {
                    district.append("<option value=" + res[local].districtCode + ">" + res[local].districtName + "</option>");
                }                if (districtCode != "") {                    console.log("districtCode"+districtCode);
                    $("#district option[value='"+districtCode+"']").attr("selected", true);
                }
            });            await $.post('/system/area/town?districtCode='+districtCode,function (res) {                console.log("district select"+district.val());                for (var local in res) {
                    town.append("<option value=" + res[local].townCode + ">" + res[local].townName + "</option>");
                }                if (townCode != "") {                    console.log("townCode"+townCode);
                    $("#town option[value='"+townCode+"']").attr("selected", true);
                }
            });
        },        provinceChange:async function () {            await $.post('/system/area/city?provinceCode='+province.val(),function (res) {                console.log("province select"+province.val());                for (var local in res) {
                    city.append("<option value=" + res[local].cityCode + ">" + res[local].cityName + "</option>");
                }
            });            await $.post('/system/area/district?cityCode='+city.val(),function (res) {                console.log("city select"+city.val());                for (var local in res) {
                    district.append("<option value=" + res[local].districtCode + ">" + res[local].districtName + "</option>");
                }
            });            await $.post('/system/area/town?districtCode='+district.val(),function (res) {                console.log("district select"+district.val());                for (var local in res) {
                    town.append("<option value=" + res[local].townCode + ">" + res[local].townName + "</option>");
                }
            });
        },        cityChange:async function(){            await $.post('/system/area/district?cityCode='+city.val(),function (res) {                console.log("city select"+city.val());                for (var local in res) {
                    district.append("<option value=" + res[local].districtCode + ">" + res[local].districtName + "</option>");
                }
            });            await $.post('/system/area/town?districtCode='+district.val(),function (res) {                console.log("district select"+district.val());                for (var local in res) {
                    town.append("<option value=" + res[local].townCode + ">" + res[local].townName + "</option>");
                }
            });
        },        districtChange:async function(){            await $.post('/system/area/town?districtCode='+district.val(),function (res) {                console.log("district select"+district.val());                for (var local in res) {
                    town.append("<option value=" + res[local].townCode + ">" + res[local].townName + "</option>");
                }
            });
        }

    }
     
    getArea.init(330000,330100,330102,330102004);


    province.change( function () {        if (province.val() != "") {
            getArea.emptySelect(1);
            getArea.provinceChange();
        }
    })

    city.change(function () {        if (city.val() != "") {
            getArea.emptySelect(2);
            getArea.cityChange();
        }
    })

    district.change(function () {        if (district.val() != "") {
            getArea.emptySelect(3);
            getArea.districtChange();
        }
    })

作者：lunlunya_4f21
链接：https://www.jianshu.com/p/5726d3026e00