layui的selectM.js多选插件下拉多选框

素颜马尾好姑娘i 2021-09-16 18:58 1347阅读 0赞

采用**layui的selectM.js多选插件** 实现下拉多选框

**实现步骤**：

1. 下载layui的selectM.js多选插件

网址：https://fly.layui.com/extend/selectN,selectM/

2. 将下载的文件添加到项目中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

3. 在jsp文件中引用 **layui.js**  **selectM.js**  **layui.css** 这3个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][]

HTML代码：

<form class="layui-form" method="post">
    
    	  <div class="layui-form-item">
    			<label class="layui-form-label">多级1</label>
    			<div id="cat_ids1">			
          </div>
    	  </div>
    	  <div class="layui-form-item">
    			<label class="layui-form-label">多级2</label>
    			<div id="cat_ids2">			
          </div>
    	  </div> 
    	  <div class="layui-form-item">
    			<label class="layui-form-label">多选1</label>
    			<div class="layui-input-block" id="tag_ids1">
       
          </div>
    	  </div>
    	  <div class="layui-form-item">
    			<label class="layui-form-label">多选2</label>
    			<div class="layui-input-block" id="tag_ids2">
      
          </div>
    	  </div>          
    
    	  <div class="layui-form-item" style="text-align:center;">
    		<div class="layui-input-block">
    		  <button type="button" class="layui-btn" lay-submit="" lay-filter="demo">console.log</button>
    	        </div> 
    	  </div>
    	</form>
      
    
      
      
      <div id="btn-wrap">
        <button type="button" class="layui-btn set1">设置多级1</button>
        <button type="button" class="layui-btn set2">设置多选1</button>
      </div>

JS代码：

<script>
    
      var tagData = [{"id":12,"name":"长者","status":0},{"id":13,"name":"工厂"},{"id":14,"name":"小学生"},{"id":15,"name":"大学生"},{"id":16,"name":"研究生"},{"id":17,"name":"教师"},{"id":18,"name":"记者"}];    
      var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","status":0,"children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];
    
      layui.config({
        base : './'
      }).extend({
        selectN: './layui_extends/selectN',
        selectM: './layui_extends/selectM',
      }).use(['layer','form','jquery','selectN','selectM'],function(){
        $ = layui.jquery;	
        var form = layui.form
        ,selectN = layui.selectN
        ,selectM = layui.selectM;
    
    
        //无限级分类-基本配置
        var catIns1 = selectN({
          //元素容器【必填】
          elem: '#cat_ids1'
          ,search:[false,true]
          //候选数据【必填】
          ,data: catData
        });     
             
    
        //无限级分类-所有配置
        var catIns2 = selectN({
          //元素容器【必填】
          elem: '#cat_ids2'
          //候选数据【必填】
          ,data: catData 
          //设置了长度
          ,width:null
          //默认值
          ,selected: [6,10,11] 
          
          //为真只取最后一个值
          ,last:true       
      
    			//空值项提示，可设置为数组['请选择省','请选择市','请选择县']
    			,tips: '请选择'
    
    			//事件过滤器，lay-filter名 不设置与选择器相同(去#.)
    			,filter: ''
    
    			//input的name 不设置与选择器相同(去#.)
    			,name: 'cat2'
    			
    			//数据分隔符
    			,delimiter: ','
    			
    			//数据的键名
    			,field:{idName:'id',titleName:'name',childName:'children'}
    			
    			//表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值 
    			,formFilter: null      
          
        }); 
    
             
        //多选标签-基本配置
        var tagIns1 = selectM({
          //元素容器【必填】
          elem: '#tag_ids1'
          //候选数据【必填】
          ,data: tagData
          ,max:2
          ,width:400
          //添加验证
          ,verify:'required'      
        }); 
        
    
        //多选标签-所有配置
        var tagIns2 = selectM({
          //元素容器【必填】
          elem: '#tag_ids2'
          
          //候选数据【必填】
          ,data: tagData
          
          //默认值
          ,selected: [12,17] 			
          
          //最多选中个数，默认5
    			,max : 6
          
    			//input的name 不设置与选择器相同(去#.)
    			,name: 'tag2'
    			
    			//值的分隔符
    			,delimiter: ','
          
    			//候选项数据的键名
    			,field: {idName:'id',titleName:'name'}
          
          
        });
    
    			
        form.on('submit(demo)',function(data){			
          console.log('catIns1 当前选中的值名：',catIns1.selected);
          console.log('catIns1 当前选中的值：',catIns1.values);
          console.log('catIns1 当前选中的名：',catIns1.names);
          console.log('catIns1 当前最后一个选中值：',catIns1.lastValue);
          console.log('catIns1 当前最后一个选中名：',catIns1.lastName);
          console.log('catIns1 当前最后一个是否已选：',catIns1.isSelected);
          console.log('');
    
          
          console.log('tagIns1 当前选中的值名：',tagIns1.selected);
          console.log('tagIns1 当前选中的值：',tagIns1.values);
          console.log('tagIns1 当前选中的名：',tagIns1.names);      
          
          console.log('');
          
          var formData = data.field;
          console.log('表单对象：',formData);
        })
         
    		//通过js动态选择
        $('.set1').click(function(){
          catIns1.set([6,10]);
          
        });
    		//通过js动态选择
        $('.set2').click(function(){
          tagIns1.set([12,13,14,15]);
        });
      });
          
    
        
    </script>

原网址：https://fly.layui.com/extend/selectN,selectM/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20210725/97fcc1739445464b96aed086b21f281b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: /images/20210725/fe6df49a18ad44e5a12ad430226be57c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1347人围观）

还没有评论，来说两句吧...

相关阅读

相关多选下拉框（select 下拉多选）

选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value...

古城微笑少年丶/ 2024年05月02日 20:21/ 0 赞/ 117 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 38 阅读

相关【Layui】formSelects下拉多选框取值

<link rel="stylesheet" href="formSelects-v4.css" /> <script src="layui.js" type=

淡淡的烟草味﹌/ 2022年11月25日 00:42/ 0 赞/ 502 阅读

相关基于jQuery下拉选择框插件支持单选多选

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui，先贴出主要代码 /

小咪咪/ 2022年08月23日 04:49/ 0 赞/ 264 阅读

相关 HTML下拉框多选

HTML下拉框多选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

谁践踏了优雅/ 2022年08月20日 12:09/ 0 赞/ 766 阅读

相关插件介绍：Bootstrap 下拉多选框插件Bootstrap Multiselect

官方文档:[http://davidstutz.github.io/bootstrap-multiselect/][http_davidstutz.github.io_boot

爱被打了一巴掌/ 2022年07月11日 09:12/ 0 赞/ 390 阅读

相关 jqgrid表格下拉搜索多选框优化—使用select下拉多选插件

jqgrid表格插件应该是表格插件中最强大吧，最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制，还好jqgrid的源码写清晰易懂。 jqgrid有个下拉搜索的功

本是古典何须时尚/ 2022年06月15日 01:49/ 0 赞/ 1651 阅读

相关 EasyUI单选，多选，下拉框

单选框 <div> <label for="name">性别:</label> <input type="radio"

一时失言乱红尘/ 2022年05月27日 03:24/ 0 赞/ 731 阅读

相关【转载】layui的下拉多选插件

这是官方介绍：[https://fly.layui.com/extend/xmSelect/][https_fly.layui.com_extend_xmSelect]

分手后的思念是犯贱/ 2021年11月16日 23:06/ 0 赞/ 542 阅读

相关 layui的selectM.js多选插件下拉多选框

采用layui的selectM.js多选插件实现下拉多选框实现步骤： 1. 下载layui的selectM.js多选插件网址：https:

素颜马尾好姑娘i/ 2021年09月16日 18:58/ 0 赞/ 1348 阅读