formSelects-v4 layui下拉框多选方案

formSelects-v4.js 基于Layui的多选解决方案

1、闲谈杂趣

v3传送门     v3文档
其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行...

2、交流学习

QQ号: 707200833 QQ群: 769620939  
重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主 
群主会在第一时间把代码更新至GitHub, 你可以前往GitHub下载formSelects完整代码, 以便于二次开发

 

3、下载与使用

下载地址: GitHub
使用文档: 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,4 formSelects.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;   });   //以下两种方式则配置所有的多选select formSelects.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("选超了..."); });   //以下两种方式则配置所有的多选select formSelects.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; });   //以下两种方式则配置所有的多选select formSelects.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);   //以下两种方式则配置所有的多选select formSelects.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', {     url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',     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   //开启联动模式 });   //server formSelects.data('select15', 'server', {     url: 'http://yapi.demo.qunar.com/mock/9813/layui/citys',     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"

 选择3项以上通过验证 北京 上海 广州 深圳 天津 杭州 

 

 验证提交 隐藏代码

<div class="layui-form">     <select name="city" xm-select="select14" lay-verify="select14">         <option value="">选择3项以上通过验证</option>         <option value="1">北京</option>         <option value="2">上海</option>         <option value="3">广州</option>         <option value="4">深圳</option>         <option value="5">天津</option>         <option value="6">杭州</option>     </select> </div>

tips模式, lay-verify="required", lay-verType="tips"

 选择3项以上通过验证 北京 上海 广州 深圳 天津 杭州 

 

 验证提交 隐藏代码

<div class="layui-form">     <select name="city" xm-select="select14_1" lay-verify="required" lay-vertype="tips">         <option value="">选择3项以上通过验证</option>         <option value="1">北京</option>         <option value="2">上海</option>         <option value="3">广州</option>         <option value="4">深圳</option>         <option value="5">天津</option>         <option value="6">杭州</option>     </select> </div>

支持表单提交自动赋值, 只需要在select加上name属性即可, 点击提交可查看url的变化

 北京 上海 广州 深圳 天津 杭州 

北京上海

 

 提交表单 查看代码

支持reset操作, 选择几项数据, 然后点击重置

 默认提示 北京 上海 广州 深圳 天津 杭州 

北京

 

 重置表单 查看代码

多选联动

多选联动, 联动需要使用data来赋值, 先给一个空select标记多选, 记得value不能重复哦

 请选择, 此处是联动多选 

 

 查看代码

多选联动, 使用远程数据实现省市区三级联动

宽度是可以自定义的, linkageWidth: 130, 默认100

 请选择, 此处是联动多选 

 

 查看代码

快捷操作

设置内置的快捷操作

 北京 上海 广州 深圳 天津 杭州 

广州深圳天津杭州

 

 查看代码

自定义快捷操作

 北京 上海 广州 深圳 天津 杭州 

广州深圳天津杭州

 

 查看代码

你是可以换数组位置, 更换显示位置滴

如果内置操作不满意, 完全可以自定义

 北京 上海 广州 深圳 天津 杭州 

广州深圳天津杭州

 

 查看代码

如果不需要快捷操作, 设置一个空数组就可以了, 它会变回以前的模样

 北京 上海 广州 深圳 天津 杭州 

广州深圳天津杭州

 

 查看代码

只显示图标

 北京 上海 广州 深圳 天津 杭州 

 

 查看代码

只显示名称

 北京 上海 广州 深圳 天津 杭州 

 

 查看代码

显示图标+名称, 但是是紧凑型的

 北京 上海 广州 深圳 天津 杭州 

 

 查看代码

7、进阶示例

监听select选择

适用于动态操作

选择[北京]时, 会发现选不上哦

 北京 上海 广州 深圳 天津 

 

 查看代码

获取实时数据

 北京 上海 广州 深圳 天津 

 

 查看代码

赋值与取值

多选取值

 北京 上海 广州 深圳 天津 

北京

 

 默认数组 val数组 val字符串 name数组 name字符串 查看代码

多选赋值

 北京 上海 广州 深圳 天津 

北京

 

 清空所有 赋值 北京,上海 追加赋值 天津 删除 已选择 [北京] 查看代码

超选后的提示

如果设置了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个, 多余的隐藏

 北京 上海 广州 深圳 天津 郑州 合肥 邯郸 舟山 海南 南京 哈尔滨 

 

 查看代码

自定义模板

选项默认是显示的孤零零的name值, 你也可以自定义格式

比如来一个左边name, 右边拼音的

 北京 上海 广州 深圳 天津 郑州 合肥 邯郸 舟山 海南 南京 哈尔滨 

 

 查看代码

搜索位置

默认是在title上的, 可以设置到选项中, 前提是你打开了搜索

xm-select-search-type="dl"

 北京 上海 广州 深圳 天津 

 

 查看代码

树状结构

惊喜有没有, 树状结构来一发

 栽树乘凉 

 

 查看代码

监听打开关闭

监听下拉选框的打开与关闭

 北京 上海 广州 深圳 天津 

 

 查看代码

结尾

↓↓↓ 捐赠作者 ↓↓↓

你们的支持, 是我们坚持的动力

[2019-06-24] v4.x -- 修复 -- 1. 修复文档中因为https无法访问http接口的问题, 从 http://yapi.demo.qunar.com 更换为 https://www.fastmock.site 2. 一个简单的手段, 让树状结构能够收起来 3. 修改template中文档写法错误   其实天下没有不散的宴席, 目前来看 jQuery 已经成为了历史, 加油吧, 小伙伴, 努力向最新的技术看齐~~~               [2018-09-10] v4.0.0.0910 -- bug修复 -- 1. 修改多级联动在li中不能使用 2. 修改多级联动在动态赋值中的错误 3. 修改非tree模式下的显示异常 4. 修改render的单独渲染异常 5. 修改template不能够获取到所有数据的问题 6. 修改默认disabled不正常的问题         [2018-08-17] v4.0.0.0817 -- bug修复 -- 1.在多次render的时候快捷图标的错误 2.修改图标库的标记 `iconfont` -> `xm-iconfont`, 避免冲突   -- 修改 -- 1. 树状结构支持收缩 2. 树状结构支持动态获取数据 3. 那个没有用的图标可以全部展开/收缩树状结构 4. 在4.1测试的select不删除拿到此版本使用 5. 更新render的渲染方式, 优化代码 6. 新增方法opened、closed, 可以监听多选的下拉展开与折叠 7. 新增config参数, 可以自定义response结构 8. !!!重点!!! 很多地方回调之前是val属性 -> value, 升级请仔细检查, 涉及: value, on, filter, maxTips 9. 貌似在所有方法中增加了自定义属性, 可以自行尝试     [2018-08-13] v4.0.0.0813 -- bug修复 -- 1.修复value在为字符串时, 多级联动的bug 2.修复value在超过int最大值时, 多级联动的bug 3.修复在动态切换radio的时候, 快捷图标不发生变化的bug 4.修改在未渲染的select上调用render, 配置项不生效的bug   -- 修改 -- 1.新增formSelects.data的赋值方式, 可以赋值有层级结构的数据 2.在template的时候可以获取到除了name, value以外的其他自定义值 3.同步4.1的on方式, 可以使用后置on获取实时数据     [2018-07-13] v4.0.0.0713 -- bug修复 -- 1.修复render使用searchType不生效 2.修复多级联动点击空白处报错 3.修正label上x号的图标 4.修正不同皮肤下复选框的border颜色色值不正确 5.修正clearInput不生效     [2018-07-11] v4.0.0.0711 -- bug修复 -- 1.修复使用show-count模式后, 点击全选下拉框高度位置错误 2.修复当xm-select对应ID不存在时的报错问题 3.修复多级联动赋值不存在时出现//的问题 4.修复条目创建时没有传值搜索内容 5.修复条目创建时name取值错误   -- 修改 -- 1.修改多选和单选的图标 2.radio模式下的快捷操作内置为清空 3.新增github pages文档, 迁移文档地址, 使用新的方式撰写     [2018-07-10] v4.0.0.0710 -- bug修复 -- 1.修正版本号 2.修改下拉方向down时错误 3.删除横向滚动 4.删除all相关代码 5.修复某些情况下label高度缺失         [2018-07-06] v4.0.0.0706 -- 新增 -- 1.修改固定高度为默认值34px; 2.当固定高度后, 已选择数据可以通过鼠标滚轮横向滚动 3.0702忘记说了, 新增点击分组名称选中该分组下的数据   -- bug修复 -- 1.修复form表单不能正常验证         [2018-07-04] v4.0.0.0704 -- bug修复 -- 1.修复了render方法的错误, 带来了一连串的影响... 2.修复有搜索内容无匹配直接关闭时, 仍显示无匹配项 3.修复当label为空时, 点击title关闭下拉placeholder不显示 4.修复当搜索框在下拉中时, label上仍然有一个50px的空白 5.修复当不开启搜索模式, label上仍然有一个50px的空白             [2018-07-02] v4.0.0.0702 -- 新增 -- 1.重做了render方法, 支持了N多种操作, 比如多选->单选, 单选->多选 2.新增create创建处理, 也许动态创建的value你并不想使用时间戳~~ 3.新增template方式, 你可以重新"画"选项结构 4.新增配置项xm-select-search-type, title|dl, 可以自由选择搜索框的显示位置, tips: 投票结果竟然相等 5.新增xm-select-show-count, 可以设置多选label的显示数量, 超出后隐藏 6.表单验证支持lay-verType   --bug修复-- 1.修复当多次使用data函数时, 历史label中的数据不清空 2.修复config函数错误, 指定配置不生效   !! 取消对dom的监听, 不在自动渲染新增的select, 如需渲染, 调用formSelects.render !! 取消formSelects.all.js, 请使用js + css模式 !! 每一次的更新都是为了更好的发展 ^_^     [2018-06-22] v4.0.0.0622 -- 新增 -- 1.config新增beforeSearch方法, 用于确定是否触发搜索 2.config新增clearInput配置, 用于确定是否清空搜索内容 3.config新增searchVal配置, 可自定义搜索内容, 触发一次后失效, 优先级大于搜索框 4.btns新增配置, 可以自定义显示[图标/名称/全部, 间隔] 5.新增search方法, 可以使用js随时随地触发搜索;(只针对于远程搜索)         [2018-06-20] v4.0.0.0620 --bug修复-- 1.修改联动模式下监听on的时候报错 2.修改pane inline模式下 边框消失的问题 3.想了很久, 还是把预置的快捷操作跳过了禁用的选项, 更新后快捷操作将不再操作被禁用的选项   -_- 也许你们真的感觉 config + data 不好用... 你们现在可以在data中写config参数了, 仅此而已, 具体示例查看 #select_data     [2018-06-18] v4.0.0.0618 --新增-- 1.新增快捷操作, 可以 (全选,清空,反选,换肤) 2.新增btns方法, 可以自定义快捷操作 3.提供formSelects.all.js与formSelects.js, 其中formSelects.all.js是使用js的方式加载的css, 不需要手动引入, 而formSelects.js需要引入formSelects.css   --bug修复-- 1.搜索模式下, 点击选项后, 清空已输入数据 2.修复远程搜索赋值与取值时的数据异常与显示异常 3.如果是远程数据, 第一次将不会延迟500ms   接下来的formSelects将进入稳定阶段, 主要以bug修复为主 ^_^         [2018-06-13] v4.0.0.0613 这次算正式发布版本更新吧, 之前的都是出于完善 + 测试的阶段 --已有功能-- 1.基础多选 + 多选分组 2.自定义提示 3.设置选择上限 4.更换友好的皮肤颜色, 当然如果不满意可以自行配置css 5.本地搜索 + 远程搜搜 6.创建不存在的条目 7.联动多选 更多的功能, 请查看文档自行尝试 ^_^   --新增+修改-- 1.config中新增beforeSuccess, 可以在success之前处理数据, 格式化成formSelects需要的格式 2.config中新增keyChildren配置, 可配置联动多选的children key 3.新增链式语法, formSelects.config().on().filter().maxTips().disabled()... 4.弱化远程返回格式, 可省略code, msg, data字段, 直接返回数组 5.新增若干示例   --bug修复-- 1.修改config中定义searchUrl后不能触发远程数据请求 2.修改on函数中的文档错误, return false是取消本次选择     [2018-05-28] v4 formSelects-v4, 静悄悄的, 愿它能够茁壮成长...     [2018-05-07] v3 formSelects-v3, 高速开发与更新, 功能越来越多了, 代码越来越看不懂了...     [2018-04-20] v2 formSelects-v2, 粗暴的升级了v1...     [2017-08-29] v1 formSelects-v1, 一个简简单单的layui多选...     转载至详细文档： https://hnzzmsf.github.io/example/example_v4.html https://hnzzmsf.github.io/layui-formSelects/docs/index.html#/module3/method-value