如何快速实现Layui多选下拉框：formSelects插件的终极指南 🚀

2026-02-05 05:06:40作者：苗圣禹Peter

formSelects是一款基于Layui框架开发的高效多选下拉框插件，专为解决复杂表单中的多选需求而设计。无论是基础的城市选择、商品分类筛选，还是动态加载的远程数据多选，这款插件都能提供流畅的交互体验和灵活的配置选项，让开发者轻松实现媲美原生控件的多选功能。

🌟 核心功能亮点

✅ 强大多选能力

支持无限层级分组展示选项，轻松应对商品分类、权限管理等复杂场景。通过直观的标签式选中效果，用户可以清晰查看已选项并快速取消选择，提升表单填写效率。

⚡ 高效搜索过滤

内置拼音检索功能，支持首字母、全拼、简拼等多种搜索方式。例如输入"bj"即可快速定位"北京"选项，配合防抖处理，确保大量数据下依然保持流畅响应。

📊 动态数据加载

提供灵活的数据源配置，支持本地数组、JSON文件和AJAX远程加载。支持自定义参数传递和数据格式化，轻松对接后端API接口，实现动态数据渲染。

🎨 个性化外观定制

内置多种皮肤样式，可通过CSS变量自定义边框、颜色、间距等样式属性。支持下拉框高度、最大显示标签数量等布局配置，完美适配不同UI设计需求。

🛠️ 丰富交互事件

提供选择变更、搜索触发、下拉框显示/隐藏等完整事件回调，方便开发者实现联动表单、实时数据验证等高级功能。支持通过API动态更新选项数据和配置参数。

📸 界面展示

图1：formSelects多选框默认样式展示，包含已选标签、搜索框和下拉选项列表

图2：分组模式下的多选效果，支持层级展开和折叠

🚀 快速上手指南

🔧 环境准备

确保项目中已引入Layui框架（推荐v2.2.6及以上版本），项目结构中layui资源路径为：UI/layui-v2.2.6/

📦 安装插件

从仓库克隆源码：

git clone https://gitcode.com/gh_mirrors/la/layui-formSelects

引入核心文件到HTML页面：

<!-- 引入Layui核心样式 -->
<link rel="stylesheet" href="UI/layui-v2.2.6/layui/css/layui.css">
<!-- 引入formSelects插件 -->
<script src="src/formSelects-v4.js"></script>

⚡ 基础使用示例

创建HTML结构：

<div class="layui-form-item">
  <label class="layui-form-label">城市选择</label>
  <div class="layui-input-block">
    <select id="citySelect" multiple lay-filter="cityFilter">
      <option value="bj">北京</option>
      <option value="sh" selected>上海</option>
      <option value="gz">广州</option>
      <option value="sz" selected>深圳</option>
    </select>
  </div>
</div>

初始化插件：

layui.use(['form', 'formSelects'], function() {
  var form = layui.form;
  var formSelects = layui.formSelects;
  
  // 渲染多选框
  formSelects.render({
    elem: '#citySelect',  // 绑定元素
    max: 3,               // 最多选择3项
    placeholder: '请选择城市' // 占位提示文字
  });
  
  // 监听选择事件
  formSelects.on('cityFilter', function(data){
    console.log('选中值:', data.elem.val());
  });
  
  form.render();
});

📚 高级配置指南

🔍 自定义搜索功能

formSelects.render({
  elem: '#productSelect',
  search: true,          // 开启搜索
  searchPlaceholder: '输入商品名称搜索',
  searchUrl: '/api/product/search', // 远程搜索接口
  searchName: 'keyword', // 搜索参数名
  searchSuccess: function(data){
    // 格式化返回数据
    return data.map(item => ({
      name: item.productName,
      value: item.productId,
      disabled: item.stock <= 0
    }));
  }
});

📂 分组数据配置

// 本地分组数据
var categoryData = [
  {
    name: '电子产品',
    children: [
      {name: '手机', value: 'phone'},
      {name: '电脑', value: 'computer'}
    ]
  },
  {
    name: '家用电器',
    children: [
      {name: '冰箱', value: 'fridge'},
      {name: '洗衣机', value: 'washer'}
    ]
  }
];

formSelects.render({
  elem: '#categorySelect',
  data: categoryData,    // 分组数据源
  isGroup: true,         // 启用分组模式
  groupIcon: true        // 显示分组图标
});

📝 常见问题解决

🔄 动态更新数据

当需要根据其他表单值动态更新选项时，可使用reload方法：

// 动态加载用户列表
function loadUserList(departmentId) {
  formSelects.reload('userSelect', {
    url: '/api/users',
    params: {deptId: departmentId},
    success: function(data){
      // 数据加载完成回调
      console.log('用户数据加载完成');
    }
  });
}

📱 移动端适配

通过配置mobile参数启用移动端模式，优化触摸操作体验：

formSelects.render({
  elem: '#mobileSelect',
  mobile: true,          // 启用移动端模式
  height: '200px',       // 下拉框高度
  trigger: 'click'       // 点击触发下拉
});