终极指南：如何使用layui-formSelects打造高效多选解决方案

layui-formSelects是一款基于Layui的强大多选插件，能够帮助开发者轻松实现各种复杂的多选功能，提升表单交互体验。无论是基础多选、分组选择还是远程搜索，这款插件都能满足你的需求。

为什么选择layui-formSelects？

layui-formSelects作为一款专注于多选功能的插件，具有以下核心优势：

• 轻量级设计：源码精简，加载速度快，不会给项目带来额外负担
• 丰富的交互体验：支持多种选择模式和视觉效果
• 高度可定制：提供丰富的配置选项，满足不同场景需求
• 良好的兼容性：完美集成Layui框架，与其他组件无缝协作

formSelects标志，简洁而专业的设计风格

快速开始：安装与基本使用

一键安装步骤

要开始使用layui-formSelects，首先需要克隆项目仓库：

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

基础使用示例

使用layui-formSelects非常简单，只需在HTML中添加select元素并标记相应属性：

<select name="city" xm-select="select1">
  <option value="1" disabled="disabled">北京</option>
  <option value="2" selected="selected">上海</option>
  <option value="3">广州</option>
  <option value="4" selected="selected">深圳</option>
  <option value="5">天津</option>
</select>

核心功能亮点

1. 多种皮肤样式

layui-formSelects提供了多种预设皮肤，满足不同UI风格需求：

<!-- 默认皮肤 -->
<select name="city" xm-select="select6_1" xm-select-skin="default">...</select>

<!-- 经典墨绿皮肤 -->
<select name="city" xm-select="select6_2" xm-select-skin="primary">...</select>

<!-- 其他皮肤 -->
<select name="city" xm-select="select6_3" xm-select-skin="normal">...</select>
<select name="city" xm-select="select6_4" xm-select-skin="warm">...</select>
<select name="city" xm-select="select6_5" xm-select-skin="danger">...</select>

2. 强大的搜索功能

支持本地搜索和远程搜索两种模式，轻松应对大量选项：

<!-- 本地搜索 -->
<select name="city" xm-select="select7_1" xm-select-search>...</select>

<!-- 远程搜索 -->
<select name="city" xm-select="select8" xm-select-search="/api/search">...</select>

3. 灵活的多选上限控制

通过简单配置即可限制最大选择数量：

<select name="city" xm-select="select5" xm-select-max="3">
  <option value="">请选择（最多3项）</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
  <option value="4">深圳</option>
  <option value="5">天津</option>
</select>

4. 单选模式支持

除了多选功能，还可以轻松实现单选效果：

<select name="city" xm-select="select13" xm-select-radio>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3" selected="selected">广州</option>
  <option value="4">深圳</option>
  <option value="5">天津</option>
</select>

5. 高级联动功能

支持多级联动选择，适用于省市区等层级选择场景：

<select name="city" xm-select="select15">
  <option value="">请选择，此处是联动多选</option>
</select>

<script>
layui.formSelects.data('select15', 'local', {
  arr: [
    {
      "name": "北京",
      "value": 1,
      "children": [
        {"name": "北京市1", "value": 12, "children": [
          {"name": "朝阳区1", "value": 13},
          {"name": "朝阳区2", "value": 14},
          ...
        ]},
        ...
      ]
    },
    ...
  ],
  linkage: true
});
</script>

实用配置参数

layui-formSelects提供了丰富的配置参数，以下是常用的一些选项：

参数名	说明	示例
xm-select	多选核心，标记不同的多选	xm-select="id"
xm-select-max	多选最多选择数量	xm-select-max="3"
xm-select-skin	皮肤样式	xm-select-skin="primary"
xm-select-search	本地搜索或远程搜索	xm-select-search="/search"
xm-select-create	允许创建不存在的选项	xm-select-create
xm-select-direction	下拉方向	xm-select-direction="up"
xm-select-radio	启用单选模式	xm-select-radio

进阶技巧与最佳实践

监听选择事件

通过监听选择事件，可以实现更复杂的交互逻辑：

layui.formSelects.on('example1', function(id, vals, val, isAdd, isDisabled){
  // id: 点击select的id
  // vals: 当前已选中的值
  // val: 当前点击的值
  // isAdd: 选中或取消操作
  // isDisabled: 是否为禁用选项
  
  // 示例：禁止选择"北京"
  if(val.value == 1){
    return false; // 返回false取消本次操作
  }
});

动态修改配置

可以通过JavaScript动态修改多选框的配置：

// 配置某一个多选的方向
layui.formSelects.config('select1', {direction: 'up'});

// 配置所有多选的方向
layui.formSelects.config({direction: 'up'});

快捷操作按钮

自定义快捷操作按钮，提升用户体验：

formSelects.btns('select16_2', ['select', 'remove', 'skin', {
  icon: 'layui-icon layui-icon-ok',  // 图标
  name: '自定义操作',                 // 名称
  click: function(id){                // 点击事件
    alert('点击了自定义快捷操作');
  }
}]);

学习资源与支持

官方文档

完整的使用文档可以在项目的docs目录中找到：docs/

示例代码

项目提供了丰富的示例代码，位于example目录：example/example_v4.html

源码文件

核心源码文件位于src目录，便于二次开发和定制：

• src/formSelects-v3.js
• src/formSelects-v4.js

总结

layui-formSelects是一款功能强大且易于使用的多选插件，它不仅提供了基础的多选功能，还支持搜索、分组、联动等高级特性。通过灵活的配置和丰富的API，开发者可以轻松实现各种复杂的选择需求。无论你是Layui新手还是资深开发者，这款插件都能帮助你快速构建出专业的表单交互体验。

现在就开始使用layui-formSelects，提升你的表单交互设计吧！ 🚀