Layui多选框的使用formSelect

1.页面

<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-form-inline">
	     		 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				 			 <legend>formSelect</legend>
				</fieldset>
	      		<div class="layui-input-inline" style="width:300px;">
			        <select xm-select="qy1" name="qy1" xm-select-show-count="2" xm-select-search  ></select>	
	      		</div>
	      		<div class="layui-input-inline" style="width:300px;">
			        <select xm-select="qy2" name="qy2" xm-select-show-count="2" xm-select-search  ></select>	
	      		</div>
	      		<div class="layui-input-inline" style="width:300px;">
			        <select xm-select="qy3" name="qy3" xm-select-show-count="2" xm-select-search  ></select>	
	      		</div>
	      		<div class="layui-input-inline" style="width:300px;">
			        <select xm-select="qy4" name="qy4" xm-select-show-count="2" xm-select-search  ></select>	
	      		</div>
	    	</div>
		</div> 	
		<div class="layui-inline layui-form-item" style="margin-top:60px;">
	  		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">保存</button>
		</div>
	</form>
    <script src="${pageContext.request.contextPath}/js/layuiSelect/formSelects-v4.min.js" type="text/javascript" charset="utf-8"></script>

2.js代码

<script type="text/javascript">	
	layui.use(['form','layer','laydate','util'],function(){
		  	var $ = layui.$;
		  	var form = layui.form;
		  	var  layer = layui.layer;
		  	var  util=layui.util;
		  	var formSelects = layui.formSelects;
		    /* formSelect常用属性
		    	xm-select	多选核心, 标记不同的多选, 多选ID	xm-select="id"
				xm-select-max	多选最多选择数量	xm-select-max="3"
				xm-select-skin	皮肤	xm-select-skin=" default | primary | normal | warm | danger "
				xm-select-search	本地搜索 & 远程搜索	xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索
				xm-select-create	条目不存在时创建, 标记性属性	xm-select-create
				xm-select-direction	下拉方向	xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
				xm-select-radio	单选模式	xm-select-radio, 最多只能选择一个
				xm-select-search-type	搜索框的显示位置	xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示
				xm-select-show-count	多选显示的label数量	xm-select-show-count="2", 超出后隐藏
		    */
		  	//模拟数据
		     var arr1= [//一般模式
		    	 {"id":"1","name":"北京"},
		    	 {"id":"2","name":"上海"},
		    	 {"id":"3","name":"天津"},
		    	 {"id":"4","name":"四川"}
		    	 ];
		    var  arr2= [//分组模式
		        {"name": "分组-1", "type": "optgroup"},
		        {"name": "北京", "value": 1},
		        {"name": "上海", "value": 2},
		        {"name": "分组-2", "type": "optgroup"},
		        {"name": "广州", "value": 3},
		        {"name": "深圳", "value": 4},
		        {"name": "天津", "value": 5}
		    ]
		     //加载数据：本地模式
			 if(arr1.length>0){
				 var strs_Select=[]; 
				 for ( var i=0; i<arr1.length; i++) {
					 strs_Select.push({'name':arr1[i].name,'value':arr1[i].id });
					}
				 formSelects.data('qy1', 'local', {
					    arr:  strs_Select
  
					});
			 }
		    formSelects.data('qy2','local',{
		    	arr:arr2
		    });
		    //加载数据：远程模式
		  /*   { "code":0,"msg":"success",
				    "data":[
				        {"name":"北京","value":1,"selected":"","disabled":""},
				        {"name":"上海","value":2,"selected":"","disabled":""},
				        {"name":"广州","value":3,"selected":"selected","disabled":""},
				        {"name":"深圳","value":4,"selected":"","disabled":"disabled"},
				        {"name":"天津","value":5,"selected":"","disabled":""}
				    ]
				} 
		    */
		    formSelects.data('qy3', 'server', {
    			url: 'https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data',
    			keyword: ''
			});
		    //联动
		    formSelects.data('qy4', 'local', {
		        arr: [
		            {
		                "name": "北京", 
		                "value": 1, 
		                "children": [
		                    {"name": "北京市1", "value": 12, "children": [
		                        {"name": "朝阳区1", "value": 13, "children": []},
		                        {"name": "朝阳区2", "value": 14, "children": []},
		                        {"name": "朝阳区3", "value": 15, "children": []},
		                        {"name": "朝阳区4", "value": 16, "children": []},
		                    ]},
		                    {"name": "北京市2", "value": 17, "children": []},
		                    {"name": "北京市3", "value": 18, "children": []},
		                    {"name": "北京市4", "value": 19, "children": []},
		                ]
		            },
		            {
		                "name": "天津", 
		                "value": 2, 
		                "children": [
		                    {"name": "天津市1", "value": 51, "children": []},
		                ]
		            },
		        ],
		        linkage: true   //开启联动模式
		    });
		    
			/* 获取数据
				方法：formSelects.value(ID,TYPE);
				参数ID: xm-select的值
				参数TYPE:all | val | valStr | name | nameStr
			*/
			form.on("submit(save)", function(data) {
				var val1=formSelects.value('qy1', 'val');
				var valStr1=formSelects.value('qy1', 'valStr');
				var valStr2=formSelects.value('qy2', 'valStr');
				var valStr3=formSelects.value('qy3', 'valStr');
				var valStr4=formSelects.value('qy4', 'valStr');
				 layer.msg(
						 valStr1+valStr2+valStr3+valStr4
				 );
				 return false;
			});
			
		});
	</script>

3.实例