百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

Layui 框架实战:动态加载 Select 与二级联动全解析

ccwgpt 2025-07-24 16:59 4 浏览 0 评论

在现代 Web 开发中，下拉选择框（Select）是用户输入数据时不可或缺的组件。很多时候，我们需要的选项并非静态写死在 HTML 中，而是需要根据业务逻辑从后端动态获取。更有甚者，我们可能需要实现“二级联动”甚至“多级联动”的效果，即一个 Select 的选择会影响另一个 Select 的可选内容。Layui 作为一款经典的前端 UI 框架，其 form 模块为我们提供了强大的表单元素美化和交互功能。本文将详细介绍如何在 Layui 框架中动态加载 Select 选项，并实现两个 Select 之间的联动效果。

一、场景引入与准备工作

想象一下，在一个商品发布的表单中，你需要先选择商品的一级分类（如：电子产品、图书音像），然后根据一级分类的选择，动态加载出对应的二级分类（如：选择“电子产品”后，二级分类出现“手机”、“电脑”、“相机”等）。这就是一个典型的 Select 联动应用场景。

在开始之前，请确保你已经正确引入了 Layui 的 CSS 和 JS 文件。我们的 HTML 结构大致如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui Select 动态加载与联动</title>
    <!-- 引入 Layui 的样式文件 -->
    <link rel="stylesheet" href="path/to/layui/css/layui.css">
</head>
<body>

<div class="layui-form" style="padding: 20px;"> <!-- layui-form 是必须的，用于表单美化 -->
    <div class="layui-form-item">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-inline">
            <select name="category1" id="category1" lay-filter="category1">
                <option value="">请选择一级分类</option>
                <!-- 一级分类选项将动态加载于此 -->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-inline">
            <select name="category2" id="category2" lay-filter="category2">
                <option value="">请先选择一级分类</option>
                <!-- 二级分类选项将根据一级分类动态加载于此 -->
            </select>
        </div>
    </div>
</div>

<!-- 引入 Layui 的 JS 文件 -->
<script src="path/to/layui/layui.js"></script>
<script>
// JavaScript 代码将写在这里
</script>

</body>
</html>

关键点：

  • 给 select 元素设置 id，方便我们通过 JavaScript 获取并操作它们。
  • 给需要监听变化事件的 select (这里是第一个) 添加 lay-filter 属性，这是 Layui 事件监听的钩子。

二、动态加载一级 Select

首先，我们需要动态地为第一个 Select（一级分类）填充选项。这些数据通常来自后端 API，这里我们用 JavaScript 数组模拟。

layui.use(['form', 'jquery'], function(){
    var form = layui.form;
    var $ = layui.jquery; // Layui 内置了 jQuery，可以直接使用

    // 模拟从后端获取的一级分类数据
    var dataCat1 = [
        { id: 'electronics', name: '电子产品' },
        { id: 'books', name: '图书音像' },
        { id: 'clothing', name: '服装服饰' }
    ];

    var cat1Select = $('#category1'); // 获取一级select元素

    // 遍历数据，生成<option>并追加到select中
    $.each(dataCat1, function(index, item) {
        // new Option(text, value) 是创建option元素的标准方法
        cat1Select.append(new Option(item.name, item.id));
    });

    // 非常重要的一步：重新渲染表单中的select元素
    // Layui 会对原生的select进行美化，动态添加option后需要告知Layui重新渲染
    form.render('select');
});

核心步骤：

  1. 引入模块：使用 layui.use() 加载 form（表单模块）和 jquery（如果需要进行更复杂的 DOM 操作或 Ajax）。
  2. 获取数据：在实际项目中，你会使用 $.ajax() 或其他方式从服务器获取 dataCat1。
  3. 填充选项：通过 jQuery 的 append() 方法或原生 JavaScript 将 <option> 元素添加到 select 中。
  4. form.render('select')：这是 Layui 中动态修改表单元素后必须执行的操作。它会告诉 Layui 重新渲染指定的表单组件（这里是 select），以确保样式和功能正常。不调用此方法，新添加的选项可能不会显示或无法正确交互。

三、实现二级 Select 联动

当一级 Select 的选项发生改变时，我们需要捕获这个事件，并根据选中的值去动态加载二级 Select 的内容。

layui.use(['form', 'jquery'], function(){
    var form = layui.form;
    var $ = layui.jquery;

    // ... (一级分类加载代码，同上) ...

    // 模拟二级分类数据，实际应根据一级选择从后端获取
    // 键名对应一级分类的id
    var dataCat2 = {
        'electronics': [
            { id: 'phone', name: '手机' },
            { id: 'computer', name: '电脑' },
            { id: 'camera', name: '相机' }
        ],
        'books': [
            { id: 'literature', name: '文学' },
            { id: 'tech', name: '科技' },
            { id: 'comics', name: '漫画' }
        ],
        'clothing': [
            { id: 'men', name: '男装' },
            { id: 'women', name: '女装' }
        ]
    };

    // 监听一级分类的选中事件
    // 'select(category1)' 中的 'category1' 对应一级select的 lay-filter 属性值
    form.on('select(category1)', function(data){
        var selectedCat1Id = data.value; // 获取一级select选中的值 (option的value)
        // var selectedCat1Text = data.elem.options[data.elem.selectedIndex].text; // 获取选中的文本

        var cat2Select = $('#category2'); // 获取二级select元素

        // 1. 清空二级select的现有选项 (保留提示选项)
        cat2Select.html('<option value="">请先选择一级分类</option>');

        // 2. 根据一级选中的值，加载对应的二级选项
        if (selectedCat1Id && dataCat2[selectedCat1Id]) { // 确保一级有值且有对应的二级数据
            $.each(dataCat2[selectedCat1Id], function(index, item) {
                cat2Select.append(new Option(item.name, item.id));
            });
        }

        // 3. 再次调用 form.render() 来重新渲染二级select
        form.render('select');
    });
});

联动逻辑解析：

  1. 事件监听：使用 form.on('select(filterVal)', callback) 来监听指定 lay-filter 值的 select 元素的 change 事件。当用户选择不同的一级分类时，回调函数会被触发。
  2. 获取选中值：在回调函数中，data.value 包含了当前选中项的 value 属性值。
  3. 清空并填充二级选项：在加载新的二级选项之前，务必先清空二级 Select 中已有的选项。通常我们会保留一个默认的提示性选项（如 “请选择二级分类” 或 “请先选择一级分类”）。使用 $('#selectId').html('<option>...</option>') 可以快速清空并设置默认项。根据一级选中的 selectedCat1Id，从 dataCat2 (或通过 Ajax 请求后端) 获取对应的二级分类数据。遍历获取到的二级数据，动态创建 <option> 并追加到二级 Select 中。
  4. 再次渲染：与一级 Select 类似，动态修改二级 Select 的选项后，必须调用 form.render('select'); 来更新其显示和功能。

四、完整示例代码

将以上两部分整合，并确保在 layui.use 回调中执行所有逻辑：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui Select 动态加载与联动</title>
    <link rel="stylesheet" href="path/to/layui/css/layui.css">
</head>
<body>

<div class="layui-form" style="padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-inline">
            <select name="category1" id="category1" lay-filter="category1">
                <option value="">请选择一级分类</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-inline">
            <select name="category2" id="category2" lay-filter="category2">
                <option value="">请先选择一级分类</option>
            </select>
        </div>
    </div>
</div>

<script src="path/to/layui/layui.js"></script>
<script>
layui.use(['form', 'jquery'], function(){
    var form = layui.form;
    var $ = layui.jquery;

    // 模拟一级分类数据
    var dataCat1 = [
        { id: 'electronics', name: '电子产品' },
        { id: 'books', name: '图书音像' },
        { id: 'clothing', name: '服装服饰' }
    ];

    // 模拟二级分类数据
    var dataCat2 = {
        'electronics': [
            { id: 'phone', name: '手机' },
            { id: 'computer', name: '电脑' },
            { id: 'camera', name: '相机' }
        ],
        'books': [
            { id: 'literature', name: '文学' },
            { id: 'tech', name: '科技' },
            { id: 'comics', name: '漫画' }
        ],
        'clothing': [
            { id: 'men', name: '男装' },
            { id: 'women', name: '女装' }
        ]
    };

    // 动态加载一级分类
    var cat1Select = $('#category1');
    $.each(dataCat1, function(index, item) {
        cat1Select.append(new Option(item.name, item.id));
    });
    form.render('select'); // 渲染一级select

    // 监听一级分类的选中事件
    form.on('select(category1)', function(data) {
        var selectedCat1Id = data.value;
        var cat2Select = $('#category2');

        cat2Select.html('<option value="">请先选择一级分类</option>'); // 清空并重置二级

        if (selectedCat1Id && dataCat2[selectedCat1Id]) {
            $.each(dataCat2[selectedCat1Id], function(index, item) {
                cat2Select.append(new Option(item.name, item.id));
            });
        }
        form.render('select'); // 渲染二级select
    });
});
</script>

</body>
</html>

(请将 path/to/layui/ 替换为你的 Layui 文件实际路径)

五、关键点总结与注意事项

  1. form.render('select') 是灵魂：每次通过 JavaScript 动态改变 select 的 option 列表后，都必须调用 form.render('select') (或 form.render() 渲染所有表单项) 来通知 Layui 更新其美化后的视图。否则，你可能会看到空的下拉框或者选项不生效。
  2. lay-filter 的妙用：它是 Layui 事件机制的桥梁，确保 form.on('select(filterName)', ...) 能够准确监听到目标 select 的变化。
  3. 数据获取：在实际项目中，dataCat1 和 dataCat2 的数据通常通过 Ajax (如 $.ajax(), $.get(), $.post()) 从服务器异步获取。你需要将数据填充和 form.render() 的逻辑放在 Ajax 请求成功的回调函数中。
  4. 清空选项：在加载新的联动数据前，记得清空目标 Select 的旧选项，避免数据叠加。
  5. 用户体验：可以添加加载提示（loading状态），尤其是在 Ajax 请求数据时，提升用户体验。
  6. 多级联动：理解了两级联动的原理后，实现三级或更多级联动的逻辑是相似的，只是需要监听更多层级的 Select 变化，并进行相应的数据加载和渲染。

六、结语

通过上述步骤，我们可以轻松地在 Layui 框架中实现 Select 的动态加载和二级联动功能。Layui 的 form 模块极大地简化了表单元素的处理，使得开发者能够更专注于业务逻辑的实现。希望本文能帮助你更好地运用 Layui 构建交互友好的表单界面。动手试试吧！

相关推荐

腾讯开源框架TarsCpp-rpc设计分析-server(二)

2Tars协议2.1是什么借用官方说法：TARS编码协议是一种数据编解码规则，它将整形、枚举值、字符串、序列、字典、自定义结构体等数据类型按照一定的规则编码到二进制数据流中。对端接收到二进制数据流...

微服务调用为什么用RPC框架，http不更简单吗?

简单点，HTTP是协议，RPC是概念！实现RPC可以基于HTTP协议（Feign），TCP协议(Netty)，RMI协议（Soap），WebService（XML—RPC）框架。传输过程中，也因为序列...

go-zero:开箱即用的微服务框架（gin框架微服务）

go-zero是一个集成了各种工程实践的Web和rpc框架，它的弹性设计保障了大并发服务端的稳定性，并且已经经过了充分的实战检验。go-zero在设计时遵循了“工具大于约定和文档”的理...

SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架

#暑期创作大赛#SOFARPC是一个高性能、高扩展性、生产级的JavaRPC框架。在蚂蚁金服，SOFARPC已经使用了十多年，已经发展了五代。SOFARPC致力于简化应用程序之间的RPC...

自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记

痛点1.bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级。2.eureka已经闭源，且框架设计较重，同时引入eureka会自行引入较多sprin...

Rust语言从入门到精通系列 - Tonic RPC框架入门实战

Rust语言是一种系统级语言，被誉为“没有丧失性能的安全语言”。Rust语言的优势在于其内存安全机制，在编译时就能保证程序的内存安全。Tonic模块是Rust语言的一个RPC（RemoteProce...

腾讯开源框架TarsCpp-rpc设计分析-client(一)

前言Tars是腾讯开源的微服务平台，包含了一个高性能的rpc框架和服务治理平台，TarsCpp是其C++版本。对于以C++为主要开发语言，同时还想深入了解rpc和微服务框架具体实现的同学来说，Tars...

设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架

为啥要开发RPC框架事情是这样的，在开发这个RPC框架之前，我花费了不少时间算是对Dubbo框架彻底研究透彻了。冰河在撸透了Dubbo2.x和Dubbo3.x的源码之后，本来想给大家写一个Dubbo源...

rpc框架使用教程，超级稳定好用，大厂都在使用

rpc是什么远程调用协议如何使用导入依赖<dependency><groupId>org.apache.dubbo</groupId><art...

Layui 框架实战:动态加载 Select 与二级联动全解析

在现代Web开发中，下拉选择框（Select）是用户输入数据时不可或缺的组件。很多时候，我们需要的选项并非静态写死在HTML中，而是需要根据业务逻辑从后端动态获取。更有甚者，我们可能需要实现“...

15个能为你节省数百小时的前端设计神器，从UI库到文档生成

无论你是刚开始开发之旅的新手，还是疲于应付生产期限的资深程序员，有一个真理始终不变：正确的工具能彻底改变你的工作流程。多年来，我测试了数百个开发工具——有些实用，大多数平庸。但有一批免费网站经受住了时...

Layui与WinForm通用权限管理系统全解析

嘿，小伙伴们，今天咱们来聊聊Layui和WinForm这两个框架在通用权限管理系统中的应用。别担心，我会尽量用简单易懂的语言来讲解，保证让大家都能跟上节奏！首先说说Layui。Layui是一个前端UI...

纯Python构建精美UI!MonsterUI让前端开发效率飙升

“无需CSS知识，告别类名记忆，11行代码实现专业级卡片组件”在传统Web开发中，构建美观界面需要同时掌握HTML、CSS、JavaScript三剑客，开发者不得不在多种语言间频繁切换。即使使用Boo...

WebTUI:将终端用户界面(TUI)之美带到浏览器的CSS库

在当今Web技术飞速发展的时代，界面设计愈发复杂多样。然而，随着现代化工具的广泛使用，一些开发者开始回归极简风格，追求一种简洁而富有韵味的设计。WebTUI正是这样一款CSS库，它将经典的终...

人教版二年级下册生字描红汇总(拼音+笔顺+描红)，可打印!

可定制内容，评论区留言。本次整理的为人教版二年级下册所有生字，共计300个；写字是小学阶段一项重要的基本功训练，把汉字写得正确、工整、美观，可以提高运用汉字这一交际工具的准确性和效率。对小学生进行写字...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表