layui2.4.3版本下拉框实现多选

如果下载的最新layui的包,就不需要以下麻烦的步骤,只需要加multiple这个属性就可以实现,但是2.4.3就不行。

1. 首先引入select多选的样式

在这里插入图片描述

2. 在jsp页面上引用加入的这个select多选的js和样式(我就不贴代码了)

3. 引入后使用如下:

3.1 在select框使用xm-select

在这里插入图片描述

<div class="layui-inline">
            <select name="passTimeStr" xm-select="bpmStatusCode">
                <option value=''>请选择备案通过时间
                <option>
                <option value="今天">今天</option>
                <option value="昨天">昨天</option>
                <option value="最近7天">最近7天</option>
                <option value="最近30天">最近30天</option>
            </select>
        </div>

3.2 在layui.use引用

在这里插入图片描述

layui.use(['form', 'layer', 'laypage', 'element', 'table', 'formSelects'], function () {
    
    
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;
        var table = layui.table;
        var formSelects = layui.formSelects;
        formSelects.btns('bpmStatusCode', []);
        });

3.3 formSelects使用

![在这里插入图片描述](https://img-blog.csdnimg.cn/a98faf62129f48eeaa583309ff54bcd4.png在这里插入图片描述

3.4 实现效果如下图所示:

在这里插入图片描述

以上就是问题解决方案,具体也可以参考官网https://gitee.com/maplemei/xm-select

formSelects样式下载链接:
链接:https://pan.baidu.com/s/19iUI7VKcDY7MuwTp-je0mg
提取码:1iqq

猜你喜欢

转载自blog.csdn.net/li22356/article/details/125403873
今日推荐