layui select 多选

先上效果图

1. 引入需要的 js，css 文件。

<link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/layui/formSelects-v4.css"/>

<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/formSelects-v4.js"></script>

下载地址https://gitcode.net/mirrors/hnzzmsf/layui-formSelects/-/tree/master/dist

2.  页面元素及其属性。

<div class="layui-form-item">
   <div class="layui-input-inline layui-form" style="white-space:nowrap;width: 360px;">
        <select id="categoryId" name="categoryId" class="layui-input" placeholder="商品分类"
                 xm-select="select1" xm-select-show-count="3" xm-select-search=""></select>
   </div>
</div>

属性名	说明	示例
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", 超出后隐藏
xm-select-search	搜索	xm-select-search=""

3. 初始化。

var formSelects = layui.formSelects;

//全局定义一次, 加载formSelects
layui.config({
    base: '../src/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
    formSelects: 'formSelects-v4'
});

// 获取数据并且铺数据  -- 商品分类列表
CoreUtil.sendAjax("/api/bus-material-category/getAllList", {}, function (res) {
    if (res.data != null) {
        var data = res.data;
        var keys = [];
        //通过循环遍历将数据赋值到temp这个二维数组中
        for (var i = 0; i < data.length; i++) {
            var temp = {
                 "name": res.data[i].name,
                 "value": res.data[i].id//这里需要注意，value应该不同
             }
             keys.push(temp)
         }
         //formSelect需要的arr是[{"name":"shuju1","value":"shuju2"},{....}]这样的格式
         formSelects.data("select1", "local", {
             arr: keys
         });
         //form.render('select');
     }
}, "POST", false, function (res) {

});

layui.use(['table', 'laypage', 'layer', 'laydate', 'formSelects'], function () {

});

 4. 获取选中的数据。

formSelects.value('select1');         // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]

formSelects.value('select1', 'all');  // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]

formSelects.value('select1', 'val');   // ["2","4"]

formSelects.value('select1', 'valStr'); // 2,4

formSelects.value('select1', 'name');   // ["上海","深圳"]

formSelects.value('select1', 'nameStr');// 上海,深圳

 5. 设置select的选中值。

formSelects.value('select1', [2, 4]);   // 选中value为2和4的option → 上海,深圳

6. 追加或删除select的选中值。

formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中

formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中

 7. 监听select的选中与取消。

/**

 * 1.监听select的选中与取消

 *

 * formSelects.on(ID, Function);

 *

 * @param ID        xm-select的值

 * @param Function  自定义处理方法

 * @param isEnd     是否获取实时数据, true/false

 */

var formSelects = layui.formSelects;

formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){

    //id:           点击select的id

    //vals:         当前select已选中的值

    //val:          当前select点击的值

    //isAdd:        当前操作选中or取消

    //isDisabled:   当前选项是否是disabled

     

    //如果return false, 那么将取消本次操作

    return false;  

});

 

//以下两种方式则配置所有的多选select

formSelects.on(function(id, vals, val, isAdd, isDisabled){

    ...

});

formSelects.on(null, function(id, vals, val, isAdd, isDisabled){

    ...

});

 

//4.0.0.0813版本之前, 受到了颇多的小伙伴吐槽, 此版本加上了获取实时数据的方法

formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){

    //id:           点击select的id

    //vals:         当前select已选中的值

    //val:          当前select点击的值

    //isAdd:        当前操作选中or取消

    //isDisabled:   当前选项是否是disabled

}, true);

8. 禁用多选。

/**

 * 1.禁用多选

 * formSelects.disabled(ID);

 * @param ID        xm-select的值

 */

var formSelects = layui.formSelects;

formSelects.disabled('select1');

 
//以下方式则禁用所有的已存在多选

formSelects.disabled();


/**

 * 1.启用多选, 启用被禁用的多选

 *

 * formSelects.undisabled(ID);

 *

 * @param ID        xm-select的值

 */

var formSelects = layui.formSelects;

formSelects.undisabled('select1');

 

//以下方式则启用所有的已存在多选

formSelects.undisabled();

9. sql

categoryIds = '2,4,11,23'

<if test="categoryIds != null and categoryIds != ''">
    and b.category_id in
    <foreach item="item" index="index" collection="categoryIds.split(',')"  open="(" separator="," close=")">
        #{item}
    </foreach>
</if>