www.javainfo.com.cn 上干货 欢迎收藏

layui目前比较流行 ， 

整理一份 multiselect 使用效果及整理说明 供大家参考，  这是一个动态加载的复选下拉框效果

效果图如下：

1）前提 引入layui的包

2）初始化文档对象

    

3）动态加载数据  此实例引用的插件为 selectM                      右键点击另存为：     selectM.zip 

    资源配置：

    

     $(document).ready(function(){

      //调整配置信息 

       layui.config({

      base : '<%=basePath %>/thirdpart/layui-v2.4.3/'         //路径自己按实际情况配置

  }).extend({

                         //引用selectM插件包 只有引用后， 后面才可以使用

       selectM: './layui_extends/selectM',    

  }).use(['layer','jquery','selectM'],function(){

       $ = layui.jquery;

       selectM = layui.selectM;       

           //动态加载数据 

   $.ajax({

url : "<%=basePath %>/util/roles/Lists.do",

type : "POST",

dataType : "json",

success : function(result){

  var list = result.data;  

             var mulSelect = selectM({    

                       elem: '#roleids'   //dom对象信息                      

                       ,data: list    //服务器返回的数据列表

                       ,width:200  //dom对象宽度

                       ,max:6   //选项个数

                       ,verify:'required'  

                       ,field: {idName:'id',titleName:'roleName'}  //属性为返回的对象的属性 看具体情况处理

             });

             select = mulSelect;

}

});       

  });

});

4）服务器返回数据说明 json 格式 如下

  {"code":0,"msg":"ok","data":[

        {"createBy":0,"flagDel":"0","id":1,"remark":"系统管理员级别，可以管理所有用户","roleName":"admin","roleWeight":100},

        {"createBy":0,"flagDel":"0","id":4,"remark":"saf2","roleName":"cessss","roleWeight":70},

        {"createBy":0,"flagDel":"0","id":5,"remark":"测试","roleName":"ceshi2","roleWeight":55}            

]}

如有疑问 请留言 欢迎提供建议