layui多选下拉框,多选,使用xm-select插件

1. layui的多选下拉框可以使用 xm-select 插件实现。使用步骤如下:1. 下载 xm-select 插件,并在页面中引入:

html

 

2. 初始化 xm-select:

js
layui.use(['xmSelect'], function(){
  var xmSelect = layui.xmSelect;
  
  // 初始化多选下拉框
  xmSelect.render({
    el: '#testSelect',  // 选择器
    name: 'test',       // input name 
    data: [     // 数据源  
      {name: '选项1', value: 1},  
      {name: '选项2', value: 2} 
    ]    
  });
});

3. 在页面添加选择器 

:

html

 4. 这样一个基本的多选下拉框就创建成功了。你可以设置更多参数,如:- prop 设置显示和存储值的字段
- tips 提示信息
- lay-verify 校验规则
- lay-search 搜索功能
- max 最大选择数

完整 demo 如下: 

html



  
  xm-select demo
  
   


  

xm-select包下载地址见下: 

xm-select包下载地址

你可能感兴趣的:(javascript,layui,CSS,layui,前端,javascript)