<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">設(shè)置多級1</button>
    <button type="button" class="layui-btn set2">設(shè)置多選1</button>
  </div>

<script charset="UTF-8" src="./layui/layui.js"></script> 
<script>

  var tagData = [{"id":12,"name":"長者","status":0},{"id":13,"name":"工廠"},{"id":14,"name":"小學(xué)生"},{"id":15,"name":"大學(xué)生"},{"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":"國內(nèi)旅游","children":[{"id":8,"name":"華北地區(qū)","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]
      //候選數(shù)據(jù)【必填】
      ,data: catData
    });     
         

    //無限級分類-所有配置
    var catIns2 = selectN({
      //元素容器【必填】
      elem: '#cat_ids2'
      //候選數(shù)據(jù)【必填】
      ,data: catData 
      //設(shè)置了長度
      ,width:null
      //默認(rèn)值
      ,selected: [6,10,11] 
      
      //為真只取最后一個(gè)值
      ,last:true       
  
			//空值項(xiàng)提示，可設(shè)置為數(shù)組['請選擇省','請選擇市','請選擇縣']
			,tips: '請選擇'

			//事件過濾器，lay-filter名 不設(shè)置與選擇器相同(去#.)
			,filter: ''

			//input的name 不設(shè)置與選擇器相同(去#.)
			,name: 'cat2'
			
			//數(shù)據(jù)分隔符
			,delimiter: ','
			
			//數(shù)據(jù)的鍵名
			,field:{idName:'id',titleName:'name',childName:'children'}
			
			//表單區(qū)分 form.render(type, filter); 為class="layui-form" 所在元素的 lay-filter="" 的值 
			,formFilter: null      
      
    }); 

         
    //多選標(biāo)簽-基本配置
    var tagIns1 = selectM({
      //元素容器【必填】
      elem: '#tag_ids1'
      //候選數(shù)據(jù)【必填】
      ,data: tagData
      ,max:2
      ,width:400
      //添加驗(yàn)證
      ,verify:'required'      
    }); 
    

    //多選標(biāo)簽-所有配置
    var tagIns2 = selectM({
      //元素容器【必填】
      elem: '#tag_ids2'
      
      //候選數(shù)據(jù)【必填】
      ,data: tagData
      
      //默認(rèn)值
      ,selected: [12,17] 			
      
      //最多選中個(gè)數(shù)，默認(rèn)5
			,max : 6
      
			//input的name 不設(shè)置與選擇器相同(去#.)
			,name: 'tag2'
			
			//值的分隔符
			,delimiter: ','
      
			//候選項(xiàng)數(shù)據(jù)的鍵名
			,field: {idName:'id',titleName:'name'}
      
      
    });

			
    form.on('submit(demo)',function(data){			
      console.log('catIns1 當(dāng)前選中的值名：',catIns1.selected);
      console.log('catIns1 當(dāng)前選中的值：',catIns1.values);
      console.log('catIns1 當(dāng)前選中的名：',catIns1.names);
      console.log('catIns1 當(dāng)前最后一個(gè)選中值：',catIns1.lastValue);
      console.log('catIns1 當(dāng)前最后一個(gè)選中名：',catIns1.lastName);
      console.log('catIns1 當(dāng)前最后一個(gè)是否已選：',catIns1.isSelected);
      console.log('');

      
      console.log('tagIns1 當(dāng)前選中的值名：',tagIns1.selected);
      console.log('tagIns1 當(dāng)前選中的值：',tagIns1.values);
      console.log('tagIns1 當(dāng)前選中的名：',tagIns1.names);      
      
      console.log('');
      
      var formData = data.field;
      console.log('表單對象：',formData);
    })
     
		//通過js動態(tài)選擇
    $('.set1').click(function(){
      catIns1.set([6,10]);
      
    });
		//通過js動態(tài)選擇
    $('.set2').click(function(){
      tagIns1.set([12,13,14,15]);
    });
  });
      
 

    
</script>