原文地址 ; https://hnzzmsf.github.io/example/example_v4.html#select_search
formSelects停止维护, 已经迁移至xm-select
formSelects-v4.js 基于Layui的多选解决方案
1、闲谈杂趣
2、交流学习
QQ号: 707200833 QQ群: 769620939 
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主
群主会在第一时间把代码更新至GitHub, 你可以前往GitHub下载formSelects完整代码, 以便于二次开发
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主
群主会在第一时间把代码更新至GitHub, 你可以前往GitHub下载formSelects完整代码, 以便于二次开发
3、下载与使用
下载地址: GitHub
使用文档: GitHub Pages
使用方式:
使用文档: GitHub Pages
使用方式:
//1.下载formSelects-v4//然后引入formSelects.css<link rel="stylesheet" href="formSelects-v4.css" />//2.模块化使用<script src="layui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> //全局定义一次, 加载formSelects layui.config({ base: '../src/' //此处路径请自行处理, 可以使用绝对路径 }).extend({ formSelects: 'formSelects-v4' }); //加载模块 layui.use(['jquery', 'formSelects'], function(){ var formSelects = layui.formSelects; });</script>//3.非模块化使用<script src="layui.all.js" type="text/javascript" charset="utf-8"></script><script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> var formSelects = layui.formSelects; </script> |
一个简单的小例子
4、基本参数
| 属性名 | 说明 | 示例 |
|---|---|---|
| xm-select | 多选核心, 标记不同的多选, 多选ID | xm-select="id" |
| xm-select-max | 多选最多选择数量 | xm-select-max="3" |
| xm-select-skin | 皮肤 | xm-select-skin=" default | primary | normal | warm | danger " |
| xm-select-search | 本地搜索 & 远程搜索 | xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索 |
| xm-select-create | 条目不存在时创建, 标记性属性 | xm-select-create |
| xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式 |
| xm-select-radio | 单选模式 | xm-select-radio, 最多只能选择一个 |
| xm-select-search-type | 搜索框的显示位置 | xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示 |
| xm-select-show-count | 多选显示的label数量 | xm-select-show-count="2", 超出后隐藏 |
5、基本方法
value
/** * 1.获取选中数据 * * formSelects.value(ID, TYPE); * * @param ID xm-select的值 * @param TYPE all | val | valStr | name | nameStr */var formSelects = layui.formSelects;formSelects.value('select1'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]formSelects.value('select1', 'all'); // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]formSelects.value('select1', 'val'); // ["2","4"]formSelects.value('select1', 'valStr'); // 2,4formSelects.value('select1', 'name'); // ["上海","深圳"]formSelects.value('select1', 'nameStr'); // 上海,深圳/** * 2.设置select的选中值 * * formSelects.value(ID, ARR); * * @param ID xm-select的值 * @param ARR value数组 */var formSelects = layui.formSelects;formSelects.value('select1', [2, 4]); // 选中value为2和4的option → 上海,深圳/** * 3.追加或删除select的选中值 * * formSelects.value(ID, ARR, isAppend); * * @param ID xm-select的值 * @param ARR value数组 */var formSelects = layui.formSelects;formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中 |
on
/** * 1.监听select的选中与取消 * * formSelects.on(ID, Function); * * @param ID xm-select的值 * @param Function 自定义处理方法 * @param isEnd 是否获取实时数据, true/false */var formSelects = layui.formSelects;formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){ //id: 点击select的id //vals: 当前select已选中的值 //val: 当前select点击的值 //isAdd: 当前操作选中or取消 //isDisabled: 当前选项是否是disabled //如果return false, 那么将取消本次操作 return false; });//以下两种方式则配置所有的多选selectformSelects.on(function(id, vals, val, isAdd, isDisabled){ ...});formSelects.on(null, function(id, vals, val, isAdd, isDisabled){ ...});//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){ //id: 点击select的id //vals: 当前select已选中的值 //val: 当前select点击的值 //isAdd: 当前操作选中or取消 //isDisabled: 当前选项是否是disabled }, true); |
maxTips
/** * 1.多选select超出最大值的提示, 默认闪烁红色边框 * * formSelects.maxTips(ID, Function); * * @param ID xm-select的值 * @param Function 自定义处理方法 */var formSelects = layui.formSelects;formSelects.maxTips('select1', function(id, vals, val, max){ //id: 点击select的id //vals: 当前select已选中的值 //val: 当前select点击的值 //max: 当天多选最大值 alert("选超了...");});//以下两种方式则配置所有的多选selectformSelects.maxTips(function(id, vals, val, max){ ...});formSelects.maxTips(null, function(id, vals, val, max){ ...}); |
filter
/** * 1.自定义本地搜索过滤方式, 默认匹配文本是否包含 * * formSelects.filter(ID, Function); * * @param ID xm-select的值 * @param Function 自定义处理方法 */var formSelects = layui.formSelects;formSelects.filter('select1', function(id, inputVal, val, isDisabled){ //id: 点击select的id //inputVal: 当前input搜索框中的数值 //val: 格式: {"name":"上海","val":"2"} //isDisabled: 当前options是否被禁用 //return true时该选项被过滤, 隐藏不显示 return true;});//以下两种方式则配置所有的多选selectformSelects.filter(function(id, inputVal, val, isDisabled){ ...});formSelects.filter(null, function(id, inputVal, val, isDisabled){ ...}); |
config
/** * 1.配置远程搜索, 请求头, 请求参数, 请求类型等 * * formSelects.config(ID, Options, isJson); * * @param ID xm-select的值 * @param Options 配置项 * @param isJson 是否传输json数据, true将添加请求头 Content-Type: application/json; charset=UTF-8 */var formSelects = layui.formSelects;formSelects.config('select1', { type: 'get', //请求方式: post, get, put, delete... header: {}, //自定义请求头 data: {}, //自定义除搜索内容外的其他数据 searchUrl: '', //搜索地址, 默认使用xm-select-search的值, 此参数优先级高 searchName: 'keyword', //自定义搜索内容的key值 searchVal: '', //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值 keyName: 'name', //自定义返回数据中name的key, 默认 name keyVal: 'value', //自定义返回数据中value的key, 默认 value keySel: 'selected', //自定义返回数据中selected的key, 默认 selected keyDis: 'disabled', //自定义返回数据中disabled的key, 默认 disabled keyChildren: 'children', //联动多选自定义children delay: 500, //搜索延迟时间, 默认停止输入500ms后开始搜索 direction: 'auto', //多选下拉方向, auto|up|down response: { statusCode: 0, //成功状态码 statusName: 'code', //code key msgName: 'msg', //msg key dataName: 'data' //data key }, success: function(id, url, searchVal, result){ //使用远程方式的success回调 console.log(id); //组件ID xm-select console.log(url); //URL console.log(searchVal); //搜索的value console.log(result); //返回的结果 }, error: function(id, url, searchVal, err){ //使用远程方式的error回调 //同上 console.log(err); //err对象 }, beforeSuccess: function(id, url, searchVal, result){ //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧 console.log(id); //组件ID xm-select console.log(url); //URL console.log(searchVal); //搜索的value console.log(result); //返回的结果 return result; //必须return一个结果, 这个结果要符合对应的数据结构 }, beforeSearch: function(id, url, searchVal){ //搜索前调用此方法, return true将触发搜索, 否则不触发 if(!searchVal){//如果搜索内容为空,就不触发搜索 return false; } return true; }, clearInput: false, //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空}, true);//以下两种方式则配置所有的多选selectformSelects.config('select1', { ...}, false);formSelects.config(null, { ...}, false); |
render
/** * 1.重新渲染, 如果已经是多选则重置为初始值, 如果是初始select则渲染为多选 * 2.支持渲染时候改变多个参数 * * formSelects.render(ID); * * @param ID xm-select的值 */var formSelects = layui.formSelects;formSelects.render('select1', { init: ["1", "2"], //默认值 skin: "danger", //多选皮肤 height: "auto", //是否固定高度, 38px | auto radio: false, //是否设置为单选模式 direction: "auto", create: function(id, name){ console.log(id); //多选id console.log(name); //创建的标签名称 return Date.now(); //返回该标签对应的val }, filter: fun..., //同formSelects.filter max: 3, //多选最多选择量 maxTips: fun..., //同formSelects.maxTips on: fun..., //同formSelects.on searchType: "title", //搜索框的位置 template: function(name, value, selected, disabled){ console.log(name); //选项名 console.log(value); //选项值 console.log(selected); //是否被选中 console.log(disabled); //是否被禁用 //例如: 反转字符串 //return name.split('').reverse().join(''); return name; //返回一个html结构, 用于显示选项 }, showCount: 0, //多选的label数量, 0,负值,非数字则显示全部});//以下方式则重新渲染所有的已存在多选formSelects.render(); |
disabled
/** * 1.禁用多选 * * formSelects.disabled(ID); * * @param ID xm-select的值 */var formSelects = layui.formSelects;formSelects.disabled('select1');//以下方式则禁用所有的已存在多选formSelects.disabled(); |
undisabled
/** * 1.启用多选, 启用被禁用的多选 * * formSelects.undisabled(ID); * * @param ID xm-select的值 */var formSelects = layui.formSelects;formSelects.undisabled('select1');//以下方式则启用所有的已存在多选formSelects.undisabled(); |
data
/** * 1.多选数据赋值 * * formSelects.data(ID, type, config); * * @param ID xm-select的值 * @param type 'local' | 'server', 本地数据或者远程数据 * @param config 配置项 * arr 本地数据数组 * url 远程数据链接 * keyword 远程数据搜索内容, 其他附加数据可以使用 formSelects.config设置 * linkage 是否为联动多选 * linkageWidth 联动多选没级宽度 *///以下代码可以在console中运行测试, 结果查看基础示例第一个var formSelects = layui.formSelects;//local模式formSelects.data('select1', 'local', { arr: [ {"name": "分组-1", "type": "optgroup"}, {"name": "北京", "value": 1}, {"name": "上海", "value": 2}, {"name": "分组-2", "type": "optgroup"}, {"name": "广州", "value": 3}, {"name": "深圳", "value": 4}, {"name": "天津", "value": 5} ]});//server模式formSelects.data('select1', 'server', { keyword: '水果'});//server返回数据与远程搜索数据结构一致{ "code":0, "msg":"success", "data":[ {"name":"北京","value":1,"selected":"","disabled":""}, {"name":"上海","value":2,"selected":"","disabled":""}, {"name":"广州","value":3,"selected":"selected","disabled":""}, {"name":"深圳","value":4,"selected":"","disabled":"disabled"}, {"name":"天津","value":5,"selected":"","disabled":""} ]}//当然你也可以偷懒, 返回如下结构[ {"name":"北京","value":1,"selected":"","disabled":""}, {"name":"上海","value":2,"selected":"","disabled":""}, {"name":"广州","value":3,"selected":"selected","disabled":""}, {"name":"深圳","value":4,"selected":"","disabled":"disabled"}, {"name":"天津","value":5,"selected":"","disabled":""}]/*************** 华丽的分割线 ***************///来一个树状结构的数据formSelects.data('select15', 'local', { arr: [ {name: '北京', value: 1, xslkdf: '123', children: [ {name: '朝阳', value: 11}, {name: '海淀', value: 12} ]}, {name: '深圳', value: 2, children: [{name: '龙岗', value: 21}]}, ]});/*************** 华丽的分割线 ***************///联动多选数据格式//local, 注意 value值请保证唯一formSelects.data('select15', 'local', { arr: [ { "name": "北京", "value": 1, "children": [ {"name": "北京市1", "value": 12, "children": [ {"name": "朝阳区1", "value": 13, "children": []}, {"name": "朝阳区2", "value": 14, "children": []}, {"name": "朝阳区3", "value": 15, "children": []}, {"name": "朝阳区4", "value": 16, "children": []}, ]}, {"name": "北京市2", "value": 17, "children": []}, {"name": "北京市3", "value": 18, "children": []}, {"name": "北京市4", "value": 19, "children": []}, ] }, { "name": "天津", "value": 2, "children": [ {"name": "天津市1", "value": 51, "children": []}, ] }, ], linkage: true //开启联动模式});//serverformSelects.data('select15', 'server', { linkage: true, linkageWidth: 130 //代表每一级别的宽度, 默认是100});//server返回数据, 同上 value不能重复{ "code":0, "msg":"success", "data":[ { "name": "北京", "value": 1, "children": [ {"name": "北京市1", "value": 12, "children": [ {"name": "朝阳区1", "value": 13, "children": []}, {"name": "朝阳区2", "value": 14, "children": []}, {"name": "朝阳区3", "value": 15, "children": []}, {"name": "朝阳区4", "value": 16, "children": []}, ]}, {"name": "北京市2", "value": 17, "children": []}, {"name": "北京市3", "value": 18, "children": []}, {"name": "北京市4", "value": 19, "children": []}, ] }, { "name": "天津", "value": 2, "children": [ {"name": "天津市1", "value": 51, "children": []}, ] }, ]} |
btns
/** * 1.快捷操作 * * formSelects.btns(ID, BTNS, config); * * @param ID xm-select的值 * @param BTNS 定义操作列表, 内置三种操作, select:全选, remove:清空, skin:换肤, 当然你可以自定义 * @param config 配置操作列表, config.show='name' 只显示名称, config.show='icon' 只显示图标, config.space='30px' 两个操作之间的间隔 */var formSelects = layui.formSelects;//默认设置了 全选, 清空, 反选//如下设置内置操作formSelects.btns('select1', ['select', 'remove', 'reverse']);//如下设置自定义formSelects.btns('select1', ['select', 'remove', 'skin', { icon: 'layui-icon layui-icon-ok', //自定义图标, 可以使用layui内置图标 name: '提示名称', click: function(id){ //点击后的操作 alert('点击了自定义快捷操作') }}]);//配置只显示名称,紧凑型, 适合宽度较窄的情况formSelects.btns('select1', ['select', 'remove'], {show: 'name', space: '10px'});//如下写法定义所有的多选formSelects.btns(['select', 'remove', 'skin']);// !!友情提示: name不能重复 |
search
/** * 1.触发搜索 * * formSelects.search(ID, val); * * @param ID xm-select的值 * @param BTNS 搜索内容 */var formSelects = layui.formSelects;//使用js主动触发搜索formSelects.search('select1', '关键内容'); |
opened
/** * 1.打开下拉框的回调事件 * * formSelects.opened(ID); * * @param ID xm-select的值 */var formSelects = layui.formSelects;//监听下拉框的打开formSelects.opened('select1', function(id){ console.log('打开了');});//如下定义所有formSelects.opened(null, function(id){ console.log('打开了');});formSelects.opened(function(id){ console.log('打开了');}); |
closed
/** * 1.关闭下拉框的回调事件 * * formSelects.closed(ID); * * @param ID xm-select的值 */var formSelects = layui.formSelects;//监听下拉框的关闭formSelects.closed('select1', function(id){ console.log('合上了');});//如下定义所有formSelects.closed(null, function(id){ console.log('合上了');});formSelects.closed(function(id){ console.log('合上了');}); |
6、基础示例
基础多选
适用性较广的基础多选，用 Tag 展示已选项
上海
pane模式
layui pane模式
上海
分组多选
基于layui的分组多选
上海
自定义tips
写一个空的option放在第一个
上海
多选上限
xm-select-max="3", 超过3个后, 默认闪烁红框提示
上海
当然, 如果你初始化值就多于max值, 那是可以设置成功滴, 取消了就选不回来了
北京
多选皮肤
xm-select-skin="default"
上海
xm-select-skin="primary", 这个墨绿style已经被内置成为了经典皮肤, 只因他诞生于layui的经典颜色
上海
xm-select-skin="normal"
上海
xm-select-skin="warm"
上海
xm-select-skin="danger"
上海
本地搜索
xm-select-search, 搜索已存在的option
上海
分组中的搜索
上海
远程搜索
xm-select-search="/search", 指定一个url, 将开启远程搜索模式
上海
远程搜索response结构, 其中name, value可以自定义, 请查看method config
code为0时, 表示正常, 不为0时则提示msg信息
{ "code": 0, "msg": "success", "data": [ {"name":"北京","value":1,"selected":"","disabled":""}, {"name":"上海","value":2,"selected":"","disabled":""}, {"name":"广州","value":3,"selected":"selected","disabled":""}, {"name":"深圳","value":4,"selected":"","disabled":"disabled"}, {"name":"天津","value":5,"selected":"","disabled":""} ]} |
当然, 远程搜索也是可以分组的
上海
{ "code": 0, "msg": "success", "data": [ {"name": "分组-1", "type": "optgroup"}, {"name":"北京","value":1,"selected":"","disabled":""}, {"name":"上海","value":2,"selected":"","disabled":""}, {"name": "分组-2", "type": "optgroup"}, {"name":"广州","value":3,"selected":"selected","disabled":""}, {"name":"深圳","value":4,"selected":"","disabled":"disabled"}, {"name":"天津","value":5,"selected":"","disabled":""} ]} |
创建条目
xm-select-create, 不存在时会创建, 选中后长久保留, value为Date.now()生成
上海
下拉方向
方式一: xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
方式二: 使用formSelects.config配置
//配置某一个多选的方向layui.formSelects.config('select1', {direction: 'up'});//配置所有多选的方向layui.formSelects.config({direction: 'up'}); |
我是朝上的
上海
我是朝下的
上海
其他的都是自动处理的哈, 当然没有朝左朝右的
我是一个动态的
上海
固定高度
xm-select-height="36px", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
北京
禁用select
disabled="disabled", 多选的高度是随便选项的变化而变化的, 当然你也可以固定一个高度, 从此高度将不再变化
广州
动态操作select的启用与禁用
广州
单选模式
xm-select-radio, 单选模式
杭州
表单操作
支持layui原生表单验证, lay-verify="xxx"
tips模式, lay-verify="required", lay-verType="tips"
支持表单提交自动赋值, 只需要在select加上name属性即可, 点击提交可查看url的变化
支持reset操作, 选择几项数据, 然后点击重置
多选联动
多选联动, 联动需要使用data来赋值, 先给一个空select标记多选, 记得value不能重复哦
多选联动, 使用远程数据实现省市区三级联动
宽度是可以自定义的, linkageWidth: 130, 默认100
快捷操作
设置内置的快捷操作
广州
自定义快捷操作
广州
你是可以换数组位置, 更换显示位置滴
如果内置操作不满意, 完全可以自定义
广州
如果不需要快捷操作, 设置一个空数组就可以了, 它会变回以前的模样
广州
只显示图标
只显示名称
显示图标+名称, 但是是紧凑型的
7、进阶示例
监听select选择
适用于动态操作
选择[北京]时, 会发现选不上哦
获取实时数据
赋值与取值
多选取值
北京
多选赋值
北京
超选后的提示
如果设置了xm-select-max="3", 当你选择第四个的时候会默认闪烁红框提示, 当然这个提示你可以自定义
深圳
自定义搜索
如果设置了xm-select-search="", 当你搜索的时候是默认判断选项文本是否包含搜索的值
如下是检测 全拼,简拼,文本是否包含, 其中汉字转拼音摘录于网络
可以尝试使用拼音进行搜索
友情提示: 远程搜索是不会经过此方法滴
配置
说起来这是个又爱又恨的方法, 设计之初是准备专门配置远程搜索用的, 无奈后面增加了很多东西, 结果变成了专门的配置方法了
好像没啥好说的, 都是点儿配置的东西, 说点儿场景吧
- 默认本地数据, js动态配置成远程搜索, 首先开启搜索模式 xm-select-search="", 然后config中定义url, 适用于url为可变参数的情况下
- 点击加载
- beforeSuccess的用法
当然上面的处理方法是用于演示beforeSuccess的用法的, 正确的姿势应该是转换数据结构滴
success, error可以直接打开控制台, 查看console的打印记录
远程数据的赋值
远程数据是使用ajax异步的模式来获取的, 所以赋值不能直接在config之后
方式一: 在返回数据中包含selected属性
方式二: 在success回调中使用value进行赋值
上面好像不太对
动态数据
本地数据
远程数据, 也许你只希望加载一次, 而不是搜索一次变一次, 这个更适合你
不知道你们为什么吐槽我的设计, 也许真的是不好, 新增如下写法
来一发树状结构压压惊
搜索控制
当输入内容为空时不触发搜索
主动触发搜索
显示数量
默认显示全部, 如果设置了高度的话就是显示指定范围内的label, 当然你也可以控制显示的数量
xm-select-show-count="2", 最多显示2个, 多余的隐藏
北京
<div class="layui-form"> <select name="city" xm-select="example8_1" xm-select-show-count="2"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> <option value="5">天津</option> <option value="6">郑州</option> <option value="7">合肥</option> <option value="8">邯郸</option> <option value="9">舟山</option> <option value="10">海南</option> <option value="11">南京</option> <option value="12">哈尔滨</option> </select></div> |
自定义模板
选项默认是显示的孤零零的name值, 你也可以自定义格式
比如来一个左边name, 右边拼音的
搜索位置
默认是在title上的, 可以设置到选项中, 前提是你打开了搜索
xm-select-search-type="dl"
树状结构
惊喜有没有, 树状结构来一发
监听打开关闭
监听下拉选框的打开与关闭
结尾
↓↓↓ 捐赠作者 ↓↓↓
你们的支持, 是我们坚持的动力
[2019-06-24] v4.x-- 修复 --1. 修复文档中因为https无法访问http接口的问题, 从 http://yapi.demo.qunar.com 更换为 https://www.fastmock.site2. 一个简单的手段, 让树状结构能够收起来3. 修改template中文档写法错误其实天下没有不散的宴席, 目前来看 jQuery 已经成为了历史, 加油吧, 小伙伴, 努力向最新的技术看齐~~~ |