### 如何在
Layui 中实现 Form 表单
Select 的多选功能
要在
Layui 框架中实现表单 `
select` 多选功能，可以借助第三方插件如 **
layui-form
Selects**
或者原生 HTML 结合
Layui 自定义样式来完成。以下是具体方法及其示例代码。
#### 方法一：
使用 layui-form
Selects 插件
通过引入 `
layui-form
Selects` 插件，能够快速实现多选下
拉框的功能[^1]。此插件提供了丰富的配置项和回调函数支持，适合复杂场景下的需求。
##### 示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Layui Form
Selects</title>
<!-- 引入
Layui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.7.6/css/
layui.css">
<!-- 引入 form
Selects-v4.min.js 和 form
Selects-v4.css -->
<script src="https://gitcode.com/gh_mirrors/la/
layui-form
Selects/form
Selects-v4.min.js"></script>
<link rel="stylesheet" href="https://gitcode.com/gh_mirrors/la/
layui-form
Selects/form
Selects-v4.css">
</head>
<body>
<div class="
layui-form-item">
<label class="
layui-form-label">多选：</label>
<div class="
layui-input-block">
<
select name="demo" id="testForm
Selects" lay-filter="aihao" multiple></
select>
</div>
</div>
<!-- 引入
Layui JS -->
<script src="https://cdn.jsdelivr.net/npm/
layui@2.7.6/
layui.js"></script>
<script>
// 初始化 form
Selects 插件
var options = {
el: "#testForm
Selects", // 绑定元素
url: "/api/getOptions", // 可选：动态加载数据接口
dataFormat: "list", // 数据格式为列表形式
search: true, // 是否启用搜索功能
valueName: 'id', // 值字段名
titleName: 'name' // 显示名称字段
};
window.form
Selects ? form
Selects.render(options) : console.error('未正确加载 form
Selects');
</script>
</body>
</html>
```
---
#### 方法二：基于原生 `<
select>`
标签与
Layui 配置
如果不想依赖额外插件，则可以直接利用 HTML 的 `<
select>`
标签并设置属性 `multiple="multiple"` 来创建一个多选下
拉框[^2]。随后结合
Layui 提供的模块化特性对其进行美化处理。
##### 示例代码：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>原生 Multi-
Select with
Layui</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.7.6/css/
layui.css">
</head>
<body>
<form class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">多选：</label>
<div class="
layui-input-block">
<
select name="interest" lay-ignore multiple="multiple"
size="5">
<option value="music">音乐</option>
<option value="movie">电影</option>
<option value="book">书籍</option>
<option value="game">游戏</option>
<option value="sport">运动</option>
</
select>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/
layui@2.7.6/
layui.js"></script>
<script>
layui.use(['form'], function () {
const form =
layui.form;
// 手动刷新渲染（lay-ignore）
form.render();
});
</script>
</body>
</html>
```
注意，在这种方式中需添加 `lay-ignore` 属性以防止默认行为被覆盖，并调用 `form.render()` 进行动态更新[^3]。
---
#### 方法三：采用增强型插件 (
layui-
select-multiple)
对于更高级的需求，可考虑
使用专门针对
Layui 开发的扩展工具——`
layui-
select-multiple`[^4]。它不仅具备基础的多选能力，还增加了诸如分组显示、异步加载等功能。
由于该方案涉及较多自定义逻辑，请参考官方文档或在线演示页面获取详细
指导。
---
### 总结
以上介绍了三种不同的方式用于实现在
Layui 框架内的 `
select` 多选功能。推荐优先选用成熟的第三方库（如 `
layui-form
Selects`），因其兼容性强且易于维护；而对于简单项目而言，直接运用标准
标签配合
Layui API 即能满足基本要求。
本文介绍了解决layui框架中组件尺寸无法通过size属性调整的问题。详细步骤包括修改CSS源码，定位到max-height属性并更改其预设的300px值，以适应不同场景的需求。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
439
