layui表单下拉选择如何修改成多选分享

layui 表单下拉框因为不支持多选,没办法,需要自己修改成多选,怎么做呢

首先我们需要引入第三方xm-select.js

地址:https://gitee.com/maplemei/xm-select

下载下拉之后呢,dist文件里面有个index.html,双击打开之后就是文档页面,xm-select.js也在这里面

首先我们找到demo

引入js之后按照文档的格式配置指定参数即可

这里我以我的代码为例

<div class="layui-input-inline layui-show-xs-block">
                            <div id="demo1">
                            </div>
                            <input type="hidden" id="wm_appid" name="wm_appid">
                        </div>
<script type="text/javascript">
    var demo1 = xmSelect.render({
        // 这里绑定css选择器
        el: '#demo1',
        // 渲染的数据
        toolbar: {show: true},
        data: {!! json_encode($app) !!},
        style:{width:'190px'},
        size:'mini',
        on: function (data) {
            //arr:  当前多选已选中的数据
            let arr = data.arr;
            // 从选中数据中提取value值
            console.log(arr);
            let app_ids = '';
            for (let i = 0; i < arr.length; i++) {
                app_ids += arr[i].value+',';
            }
            console.log(app_ids);
            document.getElementById('wm_appid').value = app_ids;
        }
    })
</script>

这里我将选中的参数存到隐藏的input里面,这里可能需要说一下的就是size是设置下拉框的大小,style是自定义样式,toolbar是开启清空和全选,具体更多参数的意义可以去查看文档

最后实现的样式是

相关推荐
苹果酱05675 小时前
前端面试vue篇:Vue2 和 Vue3 在设计和性能上有显著区别
java·spring boot·毕业设计·layui·课程设计
djk88881 天前
Layui Table 行号
前端·javascript·layui
zhanghaisong_20155 天前
layui.all.js:2 Uncaught Error: Syntax error, unrecognized expression
前端·javascript·layui
linzhisong7 天前
LayUI组件国际化多国语言版本脚本-下篇根据语种替换
前端·javascript·python·layui
hahaqi95277 天前
layui 表格点击编辑感觉很好用,实现方法如下
前端·javascript·layui
linzhisong8 天前
LayUI组件国际化多国语言版本脚本-上篇提取中文字符
前端·javascript·python·layui
武昌库里写JAVA8 天前
机器学习笔记2 - 机器学习的一般流程
spring boot·spring·毕业设计·layui·课程设计
java—大象9 天前
基于java+springboot+layui的流浪动物交流信息平台设计实现
java·开发语言·spring boot·layui·课程设计
fury_12312 天前
layui的table组件中,对某一列的文字设置颜色为浅蓝怎么设置
前端·arcgis·layui
苹果酱056714 天前
React系列教程(2)React哲学
java·spring boot·毕业设计·layui·课程设计