layui formSelects 4.x 多选框

  <div class="layui-form-item">
    <label class="layui-form-label">分类</label>
    <div class="layui-input-block">
						<select name="city" xm-select="select15_2">
							<option value="">请选择, 此处是联动多选</option>
						</select>
    </div>
  </div>

<!-- 引入分类 多选样式 开始 -->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="__STATIC__/menu/formSelects/formSelects-v4.css"/>
<script src="__STATIC__/menu/formSelects/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
      var formSelects = layui.formSelects;
			formSelects.data('select15_2', 'server', {
				  type: "post",
			    url: '{:url('menu/menujsondata')}',
			    data:{action:'category'},
			    linkage: true,
			    linkageWidth: 130,
			    
						    searchUrl: '',              //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
						    searchName: 'keyword',      //自定义搜索内容的key值
						    searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
						    keyName: 'name',            //自定义返回数据中name的key, 默认 name
						    keyVal: 'value',            //自定义返回数据中value的key, 默认 value
						    keySel: 'selected',         //自定义返回数据中selected的key, 默认 selected
						    keyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabled
						    keyChildren: 'children',    //联动多选自定义children
						    delay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
						    direction: 'auto',          //多选下拉方向, auto|up|down
						    response: {
						        statusCode: 0,          //成功状态码
						        statusName: 'code',     //code key
						        msgName: 'msg',         //msg key
						        dataName: 'data'        //data key
						    },
						    success: function(id, url, searchVal, result){      //使用远程方式的success回调
						    	 //如果有需要默认值的小伙伴请使用formSelects.value
						    	 formSelects.value('select15_2', ['349/417/419', '349/413/415'],true);
//						        console.log(id);        //组件ID xm-select
//						        console.log(url);       //URL
//						        console.log(searchVal); //搜索的value
//						        console.log(result);    //返回的结果
						    },
						    error: function(id, url, searchVal, err){           //使用远程方式的error回调
						        //同上
						        console.log(err);   //err对象
						    },
						    beforeSuccess: function(id, url, searchVal, result){        //success之前的回调, 干嘛呢? 处理数据的, 如果后台不想修改数据, 你也不想修改源码, 那就用这种方式处理下数据结构吧
						        console.log(id);        //组件ID xm-select
						        console.log(url);       //URL
						        console.log(searchVal); //搜索的value
						        console.log(result);    //返回的结果
						         
						        return result;  //必须return一个结果, 这个结果要符合对应的数据结构
						    },
						    beforeSearch: function(id, url, searchVal){         //搜索前调用此方法, return true将触发搜索, 否则不触发
						        if(!searchVal){//如果搜索内容为空,就不触发搜索
						            return false;
						        }
						        return true;
						    },
						    clearInput: false,          //当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空
			});
      
</script>
<!-- 引入分类 多选样式 结束 -->

项目：

https://fly.layui.com/extend/formSelects/#doc

http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html

https://hnzzmsf.github.io/layui-formSelects/docs/index.html#/module2/params

layui formSelects 4.x 多选框

猜你喜欢