layui-select-ext
/
index.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> layui-select-ext 表单select多选和无限级联动</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="./layui/css/layui.css" media="all" />
<style>
  #btn-wrap{margin:100px auto;text-align:center;}
  form{
    margin:30px;
  }


</style>
</head>
<body>
	<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>
		  <button type="reset" class="layui-btn layui-btn-primary">重置</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>
    <button type="button" class="layui-btn layui-btn-normal fly">社区交流</button>
    <button type="button" class="layui-btn layui-btn-normal mayun">码云下载</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":"小学生"},{"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]);
    });

    $('.fly').click(function(){
      window.open('http://fly.layui.com/jie/26751/');
    });

    $('.mayun').click(function(){
      window.open('https://gitee.com/moretop/layui-select-ext');
    });


		//监听重置按钮
		$('form').find(':reset').click(function(){
			$('form')[0].reset();
			catIns1.set();//默认值
			catIns2.set();//默认值
      tagIns1.set();//默认值
      tagIns2.set();//默认值
			return false;
		});


  });


</script>


</body>
</html>