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是开启清空和全选,具体更多参数的意义可以去查看文档

最后实现的样式是

相关推荐
zpjing~.~2 天前
layui xm-select的使用
前端·javascript·layui
ormcc3 天前
layui tree customSelet选中的内容重写,查找父级
前端·javascript·layui·tree·customselect
猫猫不是喵喵.4 天前
layui 自定义验证单选框必填
前端·javascript·layui
LWT200705266 天前
使用SpringMVC+Layui操作excel的导入导出
前端·layui·excel
武昌库里写JAVA9 天前
【MySql】-0.1、Unbunt20.04二进制方式安装Mysql5.7和8.0
spring boot·spring·毕业设计·layui·课程设计
hyiam10 天前
layui下拉框xm-select自定义搜索使用方法
javascript·html·layui·下拉框·xm-select·自定义搜索·自定义下拉框
武昌库里写JAVA17 天前
腾讯云Centos7升级Python(Python2.7.5升级Python3.8.0)【针对腾讯云,其他未测试】
spring boot·spring·毕业设计·layui·课程设计
苹果醋320 天前
java代码生成器集成dubbo,springcloud详解以及微服务遐想
spring boot·nginx·毕业设计·layui·课程设计
武昌库里写JAVA21 天前
React.createRef(),React.forwardRef(),forwardRef()结合next.js的link进行路由跳转
spring boot·spring·毕业设计·layui·课程设计