Layui框架实现地址 级联选择器并回显

在 layui 框架中，使用 form 模块的select选择器来实现地址级联功能。地址级联选择器可以方便地选择省、市、区/县等地址信息。

效果图

 layui框架里没有现成的级联选择器 我们用select下拉框实现 一般后端会给你第一个下拉框的数据列表 然后根据你选择的第一个选项的id当做参数去获取第二个选项的列表选项 第三个也同理

上代码:

<div class="layui-form-item " style="width:calc(100% - 55px)">
	<label class="layui-form-label">活动地址:</label>
	<div class="layui-input-block" id="addressSelect"
		style="display: flex;justify-content: space-between;">
		<select class="project-select" style="width: 150px;" id="selectOne" name="selectOne"
			lay-filter="selectOne">
			<option value="">请选择</option>
		</select>
		<select class="project-select" style="width: 150px;" id="selectTwo" name="selectTwo"
			lay-filter="selectTwo">
			<option value="">请选择</option>
		</select>
		<select class="project-select" style="width: 150px;" id="selectThere" name="selectThere"
			lay-filter="selectThere">
			<option value="">请选择</option>
		</select>
	</div>
</div>

这里用selectOne  selectTwo  selectThere来代表省 市 区三种类型

1.先获取到第一个下拉框列表数据并渲染到下拉框中 (开局调用)

// 获取所有父级地址
function getFatherAdd() {
    $.ajax({
        type: "get",
        url: getFatherAddress,
        async: false,
        headers: {
            'dm-authorize-token': $.cookie("token"),
        },
        success: function (res) {
            // console.log(res);
            for (var i = 0; i < res.data.length; i++) {
                $("#selectOne").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
            }
        },
        error: function (e) {
            layer.msg(e.msg);
        }
    });
}

2.然后就监听第一个下拉框的操作 选项发生改变时获取第二级下拉框数据列表

 layui.use('form', function () { 
         form = layui.form;
        // 监听 第一级的select 事件
        form.on('select(selectOne)', function (data) {
            var fatherID = data.value; // 获取选中的值
            var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
            if (fatherID !== '' && fatherID) {
                $.ajax({
                    type: "get",
                    url: getSonAddress,
                    async: false,
                    headers: {
                        'dm-authorize-token': $.cookie("token"),
                    },
                    data: {
                        pid: fatherID,
                    },
                    success: function (res) {
                        // console.log(res);
//渲染第二级下拉框
                        for (var i = 0; i < res.data.length; i++) {
                            $("#selectTwo").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
                        }
                        form.render('select');
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                    }
                });
            }
        });
 // 监听 第二级的select 事件
        form.on('select(selectTwo)', function (data) {
            var fatherID = data.value; // 获取选中的值
            var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
            if (fatherID !== '' && fatherID) {
                $.ajax({
                    type: "get",
                    url: getSonAddress,
                    async: false,
                    headers: {
                        'dm-authorize-token': $.cookie("token"),
                    },
                    data: {
                        pid: fatherID,
                    },
                    success: function (res) {
                        // 获取后面子项下拉框的选择器
                        var $selectThere = $('#selectThere');
                        // 清空后面子项下拉框的选项 这样你选择第三级下拉框数据也会跟着变化这里我一级下拉框因为就一个数据 所以第一级没有设置这个功能 看需求
                        $selectThere.empty();
//渲染第三级下拉框
                        for (var i = 0; i < res.data.length; i++) {
                            $("#selectThere").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
                        }
                        form.render('select');
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                    }
                });
            }
        });


})

提交表单就正常$("#id名").val() 获取值就行了 

效果:

最后回显功能 写在你要回显的地方啊!!

1.data.addressCity 省id

2.data.addressArea 市id

                // 回显第一级下拉框
                $("#selectOne").val(data.addressCity);
                form.render('select');

                // 回显第二级下拉框
                $("#selectTwo").empty();
                $.ajax({
                    type: "get",
                    url: getSonAddress,
                    async: false,
                    headers: {
                        'dm-authorize-token': $.cookie("token"),
                    },
                    data: {
                        pid: data.addressCity,
                    },
                    success: function (res) {
                        for (var i = 0; i < res.data.length; i++) {
                            $("#selectTwo").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
                        }
                        $("#selectTwo").val(data.addressArea);
                        form.render('select');
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                    }
                });

                // 回显第三级下拉框
                $("#selectThere").empty();
                $.ajax({
                    type: "get",
                    url: getSonAddress,
                    async: false,
                    headers: {
                        'dm-authorize-token': $.cookie("token"),
                    },
                    data: {
                        pid: data.addressArea,
                    },
                    success: function (res) {
                        for (var i = 0; i < res.data.length; i++) {
                            $("#selectThere").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
                        }
                        $("#selectThere").val(data.addressStreet);
                        form.render('select');
                    },
                    error: function (e) {
                        layer.msg(e.msg);
                    }
                });

 拿回显数据的省id 获取市列表数据(获取是为了你要修改数据) 拿到回显数据的市id 获取到第三级的数据