layui 下是使用layer.open中form下的select 无法显示

11 篇文章 0 订阅
7 篇文章 0 订阅

问题:在弹框layer.open 中使用layui的form组件下的select 样式无法显示

解决方法:

在layer.open的success下添加代码form.render('select')

 addLabelmodel = layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['800px', '640px'], //宽高
            content: '<div  style="margin-top: 50px">\n' +
            '                <form class="layui-form">\n' +
            '                    <div class="layui-form-item">\n' +
            '                        <div class="layui-inline">\n' +
            '                            <label class="layui-form-label"  style="width: 200px">模块</label>\n' +
            '                            <div class="layui-input-inline">\n' +
            '                                <select name="mid" id="mid">\n' +
            '                                    <option value="">请选择模块</option>\n' +
            '                                </select>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="layui-form-item">\n' +
            '                        <div class="layui-inline">\n' +
            '                            <label class="layui-form-label"  style="width: 200px">目录</label>\n' +
            '                            <div class="layui-input-inline">\n' +
            '                                <select name="quiz">\n' +
            '                                    <option value="0">根目录</option>\n' +
            '                                    <optgroup label="城市记忆">\n' +
            '                                        <option value="你工作的第一个城市">你工作的第一个城市</option>\n' +
            '                                    </optgroup>\n' +
            '                                    <optgroup label="学生时代">\n' +
            '                                        <option value="你的工号">你的工号</option>\n' +
            '                                        <option value="你最喜欢的老师">你最喜欢的老师</option>\n' +
            '                                    </optgroup>\n' +
            '                                </select>\n' +
            '                            </div>\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="layui-form-item">\n' +
            '                        <label class="layui-form-label" style="width: 200px">类别名称</label>\n' +
            '                        <div class="layui-input-block">\n' +
            '                            <input type="text" name="name" id="mokuainame" lay-verify="title" autocomplete="off" placeholder="请输入模块名称" class="layui-input" style="width: 500px">\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                </form>\n' +
            '                <button type="button" class="layui-btn layui-btn-normal" onclick="">提交数据</button>\n' +
            '            </div>',
            success: function(layero, index){
                // 重新渲染弹层中的下拉选择框select
                form.render('select');
            }

:结果:

如果你使用的是 layuiselect 组件,可以通过给 select 组件添加 lay-filter 属性,并在 JavaScript 使用 form.on('select(过滤器)', function(data){}) 监听 select 的选择事件,然后在回调函数使用 layuilayer 模块的 open 方法打开一个自定义的弹窗,用来展示选择的选项。在弹窗可以使用滑动插件(如 swiper.js)来实现滑动效果。具体实现可以参考以下示例代码: HTML 代码: ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选择项</label> <div class="layui-input-block"> <select name="select" lay-filter="select"> <option value=""></option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> </div> </form> ``` JavaScript 代码: ```javascript layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; form.on('select(select)', function(data){ var option = data.value; // 打开自定义弹窗 layer.open({ type: 1, title: '选择结果', content: '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">选项' + option + '</div><div class="swiper-slide">选项' + (parseInt(option) + 1) + '</div><div class="swiper-slide">选项' + (parseInt(option) + 2) + '</div></div><div class="swiper-pagination"></div></div>', area: ['80%', '80%'], success: function(layero, index){ // 初始化滑动插件 var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, }); } }); }); }); ``` 在这个例子,我们监听了 select 的选择事件,并在回调函数打开了一个自定义的弹窗,弹窗使用了 swiper.js 插件来实现滑动效果。你可以根据自己的需求来实现不同的滑动效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值