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

1、下载与使用

下载地址: 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>

一个简单的小例子

 

2、基本参数
属性名说明示例
xm-select多选核心, 标记不同的多选, 多选IDxm-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", 超出后隐藏
3、基本方法

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不能重复

/**

 * 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('合上了');

});