引用layui实现省市县三级联动——PC端

实现下拉框选择省份，再选择所选择省下边的市，以此类推下拉选择县，若没有选择省的情况下没法选择市。

1、html布局：

在select选择框内加入 lay-search=" " 即可将下拉选择框变成下拉搜索选择框。

<div class="layui-form-item">
                        <label class="layui-form-label">医院地址</label>
                        <div class="layui_input">
                            <div class="layui-input-inline">
                                <select name="province_id" class="province_select" lay-filter="province">
                                    <option value="" selected>请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city_id" class="city_select" lay-filter="city">
                                    <option value="" selected>请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="country_id" class="country_select" lay-filter="country">
                                    <option value="" selected>请选择县/乡</option>
                                </select>
                            </div>
                            <%--<div class="layui-input-inline">
                            <select name="town_id" class="town_select" lay-filter="town">
                                <option value="" selected>请选择镇</option>

                            </select>
                        </div>--%>
                            <%--  <div class="layui-input-inline">
                              <select name="village_id" class="village_select" lay-filter="village">
                                  <option value="" selected>请选择村委会</option>
                              </select>
                          </div>--%>
                        </div>
                    </div>

2、对接口，下拉框选择省，以及对应的市、县：

 var global_hos='';
    //获取省份信息
    function takeAddress() {
        $.ajax({
            async: false,
            type: "GET",
            url: "/location",
            data: {},
            dataType: "JSON",
            success: function (res) {
                console.log(global_hos);
                var data = res.data;
                data.map(function (v) {
                    if(global_hos.province_id == v.location_id){
                        $(".province_select").append('<option value="' + v.location_id + '" lay-filter="province" selected>' + v.location_name + '</option>');
                        cityAddress(global_hos.province_id);//通过省id获取市列表
                    }else{
                        $(".province_select").append('<option value="' + v.location_id + '" lay-filter="province">' + v.location_name + '</option>');
                    }
                });
                //select监听选择
                tools1();
                layui.use('form', function () {
                    form = layui.form;
                    form.render();
                });
            },
            error: function (data) {
                alert(data.message);
            }
        });
    }

    //通过省id获取市
    function cityAddress(id) {
//        console.log("省份id:"+id)
        $.ajax({
            async: false,
            type: "GET",
            url: "/location",
            data: {location_id: id},
            dataType: "JSON",
            success: function (res) {
                console.log(res);
                var data = res.data;
                data.map(function (v) {
                    if(global_hos.city_id==v.location_id){
                        $(".city_select").append('<option class="select_city" value="' + v.location_id + '" lay-filter="city" selected>' + v.location_name + '</option>');
                        countryAddress(global_hos.city_id);
                    }else{
                        $(".city_select").append('<option class="select_city" value="' + v.location_id + '" lay-filter="city">' + v.location_name + '</option>');
                    }
                });
                //select监听选择
                tools2();
                layui.use('form', function () {
                    form = layui.form;
                    form.render();
                });
            },
            error: function (data) {
                alert(data.message);
            }
        });
    }

    //通过市id获取县
    function countryAddress(location_id) {
        $.ajax({
            async: false,
            type: "GET",
            url: "/location",
            data: {location_id: location_id},
            dataType: "JSON",
            success: function (res) {
                console.log(res);
                var data = res.data;
                data.map(function (v) {
                    if(global_hos.country_id==v.location_id){
                        $(".country_select").append('<option class="select_country" value="' + v.location_id + '" lay-filter="country" selected>' + v.location_name + '</option>');
                    }else{
                        $(".country_select").append('<option class="select_country" value="' + v.location_id + '" lay-filter="country">' + v.location_name + '</option>');
                    }
                });
                //select监听选择
                tools3();
                layui.use('form', function () {
                    form = layui.form;
                    form.render();
                });
            },
            error: function (data) {
                alert(data.message);
            }
        });
    }

 //下拉框绑定监听事件，在dom文件中写入<select lay-filter="province">
    function tools1() {
        layui.use('form', function () {
            form = layui.form;
            form.on('select(province)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值(省份id值)
                console.log(data.othis); //得到美化后的DOM对象
                var id = data.value;
                resetSelect(4);
                cityAddress(id);//取出省份id值传给市cityAddress
            });
        });
    }

    function tools2() {
        layui.use('form', function () {
            form = layui.form;
            form.on('select(city)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值(市的id值)
                console.log(data.othis); //得到美化后的DOM对象
                resetSelect(3)
                countryAddress(data.value);//取出市的id值传给县/乡countryAddress
            });
        });
    }
    function tools3() {
        layui.use('form', function () {
            form = layui.form;
            form.on('select(country)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值(县/乡的id值)
                console.log(data.othis); //得到美化后的DOM对象
                resetSelect(2)
                // townAddress(data.value);
            });
        });

    }
    //重置下拉框选项
    function resetSelect(index) {
        console.log(index)
        var resArray = ['select_village', 'select_town', 'select_country', 'select_city'];
        for (var i = index - 1; i >= 0; i--) {
            var classname = resArray[i];
            console.log(classname)
            $('.' + classname).remove();
        }
    }