Layui框架的select下拉框实现二级联动

最新推荐文章于 2025-04-09 15:44:40 发布

一个高效工作的家伙

最新推荐文章于 2025-04-09 15:44:40 发布

阅读量4.5k

点赞数 2

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/qiuweifan/article/details/130987472

版权

文章介绍了如何使用layui框架创建地市二级联动的下拉菜单。首先，展示了HTML结构，包括两个select元素。然后，通过JavaScript实现联动效果，通过Ajax获取省份和城市数据，动态填充下拉选项，并使用layui的form模块进行渲染。当父级省份选择改变时，会重新加载子级城市的选择项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui的地市二级联动菜单，官网仅有示例代码，仅备存。需要时查阅。

表单组件 form - Layui 文档

下拉菜单代码：

<form class="layui-form">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1" lay-filter="quiz1"></select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2" lay-filter="quiz2"></select>
    </div>
</form>

JavaScript实现代码：

layui.use(['form'], function () {
        // layui引入需要的组件
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        // 二级联动 
        // 第一步 渲染父级
        $.ajax({
            url: '/getProvince',	// 后台取到所有的省份名称
            dataType: 'json',
            type: 'get',
            success: function (resData) {
                $('#quiz1').empty();
                $.each(resData.data, function (index, value) {
                    // 这里的 value.name
                    // 前者是页面显示的值，后者是传递给后台的值。
                    // 正常情况下，后者应该是 value.id
                    $('#quiz1').append(new Option(value.name, value.name));	// 下拉菜单里添加元素
                });

                //渲染select
                form.render('select');
            }
        });
        // 第二步 监听父级，每当父级发生变化时，渲染子级的值
        form.on('select(quiz1)', function(data){
            var provinceName = data.value; // roomName 选中的省份名称
            
            $.ajax({
                url: '/getCity',
                dataType: 'json',
                type: 'post',
                data: {
                    provinceName: provinceName
                },		// 传入科室名称，查找该科室的所有床号
                success: function (resData) {
                    // 清空床号
                    $('#quiz2').empty();
                    $.each(resData.data, function (index, value) {
                        // 这里的 value.cityname
                        // 前者是页面显示的值，后者是传递给后台的值。
                        // 正常情况下，后者应该是 value.id
                        $('#quiz2').append(new Option(value.cityname, value.cityname));// 下拉菜单里添加元素
                    });

                    //渲染select
                    form.render('select');
                }
            });
        });

    });