formSelects-v4.js 基于Layui的select多选

formSelects-v4.js下载地址：https://github.com/hnzzmsf/layui-formSelects

formSelects-v4.js 使用文档：https://hnzzmsf.github.io/example/example_v4.html

      基于 layui 的 select 多选解决方案。支持：多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。

一、非模块化使用

        引入 css 和 js 即可  , Layui 使用非模块化

    
    
    使用layui
    
    





    
        

            用户名
            

                
            
        
        

            密码
            

                
            
        
        

            多选选择框
            

                
                    请选择一个城市，可搜索
                    北京
                    上海
                    杭州
                    西安
                
            
        
        

            

                立即提交
                重置
            
        
    






    var formSelects = layui.formSelects;
    var arr = ['北京', '杭州'];
    formSelects.value('cityXmSelect', arr); // 设置select的选中值

    //监听提交
    layui.form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });

  

二、模块化使用

       引入formSelects-v4.css，不引入formSelects-v4.js，通过使用扩展模块全局引入js

    
    
    使用layui
    
    





    
        

            用户名
            

                
            
        
        

            密码
            

                
            
        
        

            多选选择框
            

                
                    请选择一个城市，可搜索
                    北京
                    上海
                    杭州
                    西安
                
            
        
        

            

                立即提交
                重置
            
        
    





    //全局定义一次, 加载formSelects
    layui.config({
        base: './static/layui2.5.4/' //设定扩展模块所在的目录, 可以使用绝对路径
    }).extend({  //设定模块别名
        formSelects: 'formSelects-v4'
    });
    //加载模块
    layui.use(['layer', 'form','jquery','formSelects'], function(){
        var layer = layui.layer
            ,form = layui.form;
        var $ = layui.$;  //使用自己引入的jQuery版本,后面跟平时使用一样
        var formSelects = layui.formSelects;

        var arr = ['北京', '西安'];
        formSelects.value('cityXmSelect', arr); // 设置select的选中值
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    

三 formSelects-v4.js 属性

基本参数

属性名说明示例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-createxm-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", 超出后隐藏

基本方法

  

 

      多参考官方文档，基本使用 OK

ends~