天天看点

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>
<!-- 引入分类 多选样式 结束 -->      
layui formSelects 4.x 多选框

项目:

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

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