(动态添加select后不显示?)layui动态添加select后重新渲染

一、问题:利用jQuery动态添加的代码中包含select,运行后不显示
1、显示的状态
在这里插入图片描述
2、后台的代码
在这里插入图片描述
正常情况下应该像队长班级一样显示,但是却惊奇的发现,事与愿违

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

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

layui.use('form', function(){
 var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()
 form.render();
 });

三、抢救措施
在每一次添加之后,都对form表单重新渲染,直接上代码

function renderForm(){//在这里把重新渲染的功能包装秤一个方法
        layui.use('form', function(){
            var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()
            form.render();
        });
    }
$("#addBtn").click(function () {
        var array = new Array();
        $("#leaderCls option").each(function () {
            var txt = $(this).text();
            if(txt!="请选择班级"){
                array.push(txt);
            }
        })

        var str = "";
        for(var i=0; i<array.length; i++){
            str += "<option value='"+array[i]+"'>"+array[i]+"</option>"
        }
        $("#infoList").append("<div><a href=\"#\" name=\"rmlink\">X</a>\n" +
            "<div class=\"layui-form-item\">\n" +
            "\t<label class=\"layui-form-label\">队员学号:</label>\n" +
            "\t<div class=\"layui-input-block\">\n" +
            "\t\t<input type=\"text\" name=\"stuId\" required lay-verify=\"required\" placeholder=\"请输入队员学号\" autocomplete=\"off\" class=\"layui-input\">\n" +
            "\t</div>\n" +
            "</div>"+
            "<div class=\"layui-form-item\">\n" +
            "    <label class=\"layui-form-label\">队员姓名:</label>\n" +
            "    <div class=\"layui-input-block\">\n" +
            "        <input type=\"text\" name=\"stuName\" required lay-verify=\"required\" placeholder=\"请输入队员姓名\" autocomplete=\"off\" class=\"layui-input\">\n" +
            "    </div>\n" +
            "</div>\n" +
            "<div class=\"layui-form-item\">\n" +
            "    <label class=\"layui-form-label\">队员班级:</label>\n" +
            "    <div class=\"layui-input-block\">\n" +
            "       <select name=\"stuClass\" lay-filter=\"status\">\n" +
            "           <option value=\"\">请选择班级</option>\n" +
                            str+
            "       </select>\n"+
            "    </div>\n" +
            "</div></div>");
        renderForm();//每一次动态添加代码后重新渲染一下form
        // 为新元素节点添加事件侦听器
        bindListener();
    })    

四、效果
在这里插入图片描述
好起来了。

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值