(动态添加select后不显示?)layui动态添加select后重新渲染
作者:神秘网友
发布时间:2020-09-09 07:43:27
(动态添加select后不显示?)layui动态添加select后重新渲染
(动态添加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(); })
四、效果
好起来了。