当前位置：首页 > news >正文

告别原生下拉框！用xm-select.js为你的Layui项目快速集成美观多选功能

news 2026/7/16 3:19:13

告别原生下拉框！用xm-select.js为你的Layui项目快速集成美观多选功能

在后台管理系统开发中，表单控件的美观性和功能性直接影响用户体验和开发效率。Layui框架虽然提供了简洁的UI组件，但其原生下拉框（select）在多选、搜索等场景下显得力不从心。本文将介绍如何通过xm-select.js插件，快速为Layui项目集成现代化下拉多选功能，解决实际开发中的痛点问题。

1. 为什么需要替换原生下拉框？

原生HTML的<select>元素在多选场景下存在诸多局限：

样式单一：无法与Layui的现代设计风格完美融合
功能薄弱：缺乏搜索过滤、标签展示等实用特性
交互生硬：多选操作不够直观，特别是在移动端体验较差
数据绑定复杂：动态加载和回显需要大量额外代码

相比之下，xm-select.js提供了以下优势：

特性	原生select	xm-select.js
多选支持	有限	完善
搜索过滤	无	支持
样式定制	困难	高度可定制
数据绑定	手动处理	自动完成
移动端适配	差	优秀

2. 快速集成xm-select.js

2.1 基础环境准备

首先确保你的项目已经引入Layui框架，然后通过以下方式添加xm-select.js：

<!-- 引入Layui基础样式和脚本 --> <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <!-- 引入xm-select.js --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xm-select@1.1.6/dist/xm-select.css"> <script src="https://cdn.jsdelivr.net/npm/xm-select@1.1.6/dist/xm-select.js"></script>

2.2 创建选择器容器

在HTML中创建一个容器元素，用于承载xm-select组件：

<div class="layui-form-item"> <label class="layui-form-label">分类选择</label> <div class="layui-input-block"> <div id="category-selector" class="xm-select-demo"></div> <input type="hidden" id="selected-categories" name="categories"> </div> </div>

关键点说明：

外层使用Layui的表单布局类保持风格统一
隐藏的<input>元素用于存储最终选中的值
容器宽度会自动适应Layui的布局系统

3. 动态数据加载与绑定

实际项目中，选项数据通常来自API接口。下面演示如何通过Ajax动态加载数据：

3.1 基本数据加载

layui.use(['jquery'], function(){ var $ = layui.jquery; $.ajax({ url: '/api/categories', type: 'GET', dataType: 'json', success: function(res) { var options = res.data.map(function(item) { return {name: item.name, value: item.id} }); xmSelect.render({ el: '#category-selector', data: options, filterable: true, // 开启搜索 theme: {color: '#1E9FFF'}, // 使用Layui主色调 on: function(data) { // 选中值变化时更新隐藏域 $('#selected-categories').val(data.arr.map(i => i.value).join(',')); } }); } }); });

3.2 数据回显处理

编辑场景下，我们需要将已选中的值回显到选择器中：

// 假设从服务器获取了已选中的分类ID数组 var selectedIds = [1, 3, 5]; xmSelect.render({ // ...其他配置同上 initValue: selectedIds, // 设置初始选中值 model: {label: {type: 'block'}} // 以标签形式展示已选项 });

4. 高级功能与实战技巧

4.1 自定义选项模板

通过template选项可以自定义每个选项的显示方式：

xmSelect.render({ // ...其他配置 template: function(item, sels, name, value){ return `<div style="display:flex;align-items:center;"> <span style="color:#${item.color};margin-right:8px;">■</span> <span>${item.name}</span> </div>`; } });

4.2 分组显示选项

对于分类数据，可以按组展示：

xmSelect.render({ // ...其他配置 data: [ { name: '水果', value: 'fruit', children: [ {name: '苹果', value: 'apple'}, {name: '香蕉', value: 'banana'} ] }, { name: '蔬菜', value: 'vegetable', children: [ {name: '西红柿', value: 'tomato'}, {name: '黄瓜', value: 'cucumber'} ] } ] });

4.3 表单提交处理

在Layui表单提交时，正确处理xm-select的值：

layui.form.on('submit(formDemo)', function(data){ // 直接获取隐藏域的值 var selectedValues = $('#selected-categories').val(); // 或者通过xmSelect实例获取 var selectInstance = xmSelect.get('#category-selector'); var values = selectInstance.getValue('valueStr'); // 后续表单处理... return false; });

5. 性能优化与常见问题

5.1 大数据量优化

当选项超过1000条时，建议：

开启remoteSearch: true实现远程搜索
使用分页加载：pageSize: 50
延迟加载：lazy: true

xmSelect.render({ // ...其他配置 remoteSearch: true, remoteMethod: function(val, cb, show){ // 实现远程搜索逻辑 $.get('/api/search?q='+val, function(res){ cb(res.data); }); } });