省市区联动下拉菜单的完整实现（前后端）

最近在做一个地产小程序项目，后台录入项目信息时需要联动选择省市区；
而找了一圈后，也没有特别合适的前后端方案可以拿来直接用；
遂直接自己搞了一下，整个方法很笨，如果有大神路过看到，不要笑话我。

1.后端部分：tp5.1、mysql
数据库部分：

id	area_name	area_code	level
1	河北省	130000	1
2	石家庄市	130100	2
3	长安区	130101	3

很简单，省是level1，市2，县区3；
然后area_code前两位区分省，前四位区分市；

php部分：

//页面只渲染省级数据
$provinceData = DB::name('area_code')->where('level','1')->select();
$this->assign('provinceData', $provinceData);

//城市数据查询
public function queryCityData(){
   if (request()->isAjax()) {
       $provinceCode = substr(input('post.provinceCode'),0,2);
       $cityData = Db::query("SELECT * FROM rh_area_code WHERE LEVEL = 2 AND substr(area_code,1,2) = ".$provinceCode);
       return json(['code' => '1','cityData' => $cityData]);
   }
}

//地区数据查询
public function queryAreaData(){
   if (request()->isAjax()) {
       $areaCode = substr(input('post.cityCode'),0,4);
       $areaData = Db::query("SELECT * FROM rh_area_code WHERE LEVEL = 3 AND substr(area_code,1,4) = ".$areaCode);
       return json(['code' => '1','areaData' => $areaData]);
   }
}

2.前端部分：jquery+layui

//首次展示页面时实际上只有省级有数据填充
<div class="layui-form-item" id="addressSelect" province="" city="" area="">
    <label class="layui-form-label">项目地址</label>
    <div class="layui-input-inline" style="width:20%;">
        <select name="province_code" lay-filter="provinceSelect">
            <option value="">请选择省</option>
            {volist name="provinceData" id="vo"}
            <option value="{$vo.area_code}" areaName="{$vo.area_name}">{$vo.area_name}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-input-inline" style="width:20%;">
        <select name="city_code" lay-filter="citySelect">
            <option value="">请选择市</option>
        </select>
    </div>
    <div class="layui-input-inline" style="width:20%;">
        <select name="area_code" lay-filter="areaSelect">
            <option value="">请选择县/区</option>
        </select>
    </div>
</div>

通过layui监听select的改变，然后把选中的value发送回后端请求到相对应的城市列表数据，最后再渲染到城市select中。

//监听省份select,联动省市区
form.on('select(provinceSelect)', function(data){
    $.ajax({
        url:"{:addonUrl('bwinHouse/Admin/queryCityData')}",
        type:'post',
        data:{provinceCode:data.value},
        dataType:'json',
        success:function (data) {
            if(data.code == 1){
                //渲染城市数据
                let cityData = data.cityData;
                var html = '请选择市';
                for (let i = 0; i < cityData.length; i++){
                    html += '+ cityData[i].area_code + '">' + cityData[i].area_name + '';
                }
                $("[name='city_code']").html(html);
                var form = layui.form;
                form.render();
                //console.log(data.cityData);
            }else{
                //拉取城市数据出错
                layer.open({
                    icon:5,
                    title:'数据出错'
                })
            }
        }
    });
});

县区数据获取同理，代码略

这样，就完成了省市区的联动；
本人完全是半路出家，瞎鼓捣自学，所以不知道是否有很简单的实现方式，希望有大佬可以指点。