layui批量添加下select下拉框不显示或没有效果_layui动态添加select th:each没有生效-CSDN博客

本文链接：https://blog.csdn.net/SDJN_ONE/article/details/112780403

翻阅layui官方API发现

Layui会对select、checkbox、radio等原始元素隐藏，从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）

所以当新添加这些元素以后需要对页面表单元素重新渲染一下

<script>
    var form,layer, $,laydate;
    layui.use(['form','laydate'], function(){
        form = layui.form;
        layer = layui.layer;
        $ = layui.$;
        laydate = layui.laydate;
 
        //初始化日期
        // initDateType("rq_1",true);
        //初始化时间
        // initTimeType("kssj_1",true);
        // initTimeType("jssj_1",true);
        laydate.render({
            elem:'#dtime'
            ,trigger: 'click'// 解决一闪而过的问题
            ,value: new Date()//默认当前时间
        });
        laydate.render({
            elem:'#stdtime'
            ,trigger: 'click'// 解决一闪而过的问题
            ,value: new Date()//默认当前时间
        });
 
 
 
 
        $('#cancel').on('click',function (){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        })
 
        //自定义验证规则
        form.verify(form_verify);
        //监听提交
        form.on('submit(submit_form)', function(data){
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "${pageContext.request.contextPath}/taklhjz/bybqhjl/saveMore" ,//url
                data: $('#form').serialize(),
                success: function (res) {
                    if (res.success) {
                        setOpenCloseParam("reload");
                        layer.msg("数据保存成功。", {time: 2000});
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }else{
                        if(res.loseSession=='loseSession'){
                            loseSession(res.msg,res.url)
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                },
                error : function() {
                    layer.msg("异常！");
                }
            });
            return false;
        });
 
 
 
 
 
        // form.render();
    });
 
 
    var index = 1;
    function addLine(){
        index ++;
        var tt = '<tr id="tr_'+index+'">';
        tt += '<td><select name="eqname" id="eqname" lay-verify="field_len50" lay-filter="">\n' +
            '                    <option value="">请选择设备名称</option>\n' +
            '                    <option value="循环水泵">循环水泵</option>\n' +
            '                    <option value="热水循环泵">热水循环泵</option>\n' +
            '                    <option value="定压补水泵">定压补水泵</option>\n' +
            '                    <option value="生活给水泵">生活给水泵</option>\n' +
            '                    <option value="生产水泵">生产水泵</option>\n' +
            '                    <option value="循环水补水泵">循环水补水泵</option>\n' +
            '                    <option value="消防稳压泵">消防稳压泵</option>\n' +
            '                    <option value="仪表风压缩机">仪表风压缩机</option>\n' +
            '                    <option value="仪表风吸干机">仪表风吸干机</option>\n' +
            '                    <option value="PSA空压机">PSA空压机</option>\n' +
            '                    <option value="BOG压缩机A润滑油泵">BOG压缩机A润滑油泵</option>\n' +
            '                    <option value="BOG压缩机B润滑油泵">BOG压缩机B润滑油泵</option>\n' +
            '                    <option value="BOG压缩机A冷却水泵">BOG压缩机A冷却水泵</option>\n' +
            '                    <option value="BOG压缩机B冷却水泵">BOG压缩机B冷却水泵</option>\n' +
            '                    <option value="MR1压缩机润滑油泵">MR1压缩机润滑油泵</option>\n' +
            '                    <option value="MR2压缩机润滑油泵">MR2压缩机润滑油泵</option>\n' +
            '                    <option value="洗涤塔回流泵">洗涤塔回流泵</option>\n' +
            '                    <option value="重烃输送泵">重烃输送泵</option>\n' +
            '                    <option value="循环水缓蚀阻垢剂加药泵">循环水缓蚀阻垢剂加药泵</option>\n' +
            '                    <option value="贫胺低压循环泵">贫胺低压循环泵</option>\n' +
            '                    <option value="胺高压循环泵">胺高压循环泵</option>\n' +
            '                    <option value="再生塔回流泵">再生塔回流泵</option>\n' +
            '                </select></td>';
        tt += '<td><input type="text" name="ooupn" id="ooupn" lay-verify="field_len50" autocomplete="off" placeholder="请输入原运行机组位号" class="layui-input"></td>';
        tt += '<td><input type="text" name="stpn" id="stpn" lay-verify="field_len50" autocomplete="off" placeholder="请输入切换至机组位号" class="layui-input"></td>';
        tt += '<td><input type="text" name="stdtime" id="stdtime_'+index+'" lay-verify="field_len50" autocomplete="off" placeholder="请输入切换时间" class="layui-input"></td>';
        tt += '<td><input type="text" name="operator" id="operator" lay-verify="field_len50" value="${loginUser.login_name}" autocomplete="off" placeholder="请输入操作人" class="layui-input"></td>';
        tt += '<td><input type="text" name="arecord" id="arecord" lay-verify="field_len50" autocomplete="off" placeholder="请输入异常记录" class="layui-input"></td>';
        tt += '<td><textarea name="taklhjz_bz" id="taklhjz_bz" placeholder="请输入" lay-verify="field_len500" class="layui-textarea"></textarea></td>';
        tt += '<td style="width: 78px;"><div class="layui-btn-group"><button type="button" onclick="addLine();" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button><button type="button" onclick="delLine(\''+index+'\');" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon"></i></button></div></td>';
        tt += '</tr>';
        $("#table tr:last").after(tt);
 
        //初始化日期
        initDateType("stdtime_"+index,true);
        // //初始化时间
        // initTimeType("kssj_"+index,true);
        // initTimeType("jssj_"+index,true);
        // laydate.render({
        //     elem:'#"stdtime_"+index'
        //     ,trigger: 'click'// 解决一闪而过的问题
        //     ,value: new Date()//默认当前时间
        // });
 
 
        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
 
    }
 
    function delLine(index){
        $("#tr_"+index).remove();
    }
 
</script>