解决使用layui的时候form表单中的select等不能渲染的问题


Posted in Javascript onSeptember 18, 2019

1.使用的是动态的添加一些内容到表单里面去,然后就出现了原始的html标签样式,看了问题的解决也有,尝试了一下,以为是将form.render放到html页面里的script里就可以了,但是通过实验发现,不能放在页面里的script标签里面,应该放在你动态添加的元素的方法的后面,也就是添加的代码写完,放在这之后.

主要问题中说的要将select等标签放在 class=“layui-form” 的标签元素下

$("#father").append("<form class=\"layui-form\" lay-filter='test' > " +
    "<div class=\"layui-form-item\" >\n" +
    "  <label class=\"layui-form-label\">学院班级:</label>\n" +
    "  <div class=\"layui-input-inline\" >\n" +
    "   <select name=\"ucollege\">\n" +
    "    <option value=\"\">请选择专业</option>\n" +
    "    <option value=\"浙江\" selected=\"\">浙江省</option>\n" +
    "    <option value=\"你的工号\">江西省</option>\n" +
    "    <option value=\"你最喜欢的老师\">福建省</option>\n" +
    "   </select>\n" +
    "  </div>\n" +
    "  <div class=\"layui-input-inline\">\n" +
    "   <select name=\"ugrade\" >\n" +
    "    <option value=\"\">请选择班级</option>\n" +
    "    <option value=\"杭州\">杭州</option>\n" +
    "    <option value=\"宁波\" disabled=\"\">宁波</option>\n" +
    "    <option value=\"温州\">温州</option>\n" +
    "    <option value=\"温州\">台州</option>\n" +
    "    <option value=\"温州\">绍兴</option>\n" +
    "   </select>\n" +
    "  </div>\n" +
    "</div>" +
    " <div class=\"layui-form-item\">\n" +
    "  <label class=\"layui-form-label\">性别:</label>\n" +
    "  <div class=\"layui-input-block\">\n" +
    "   <input type=\"radio\" name=\"usex\" value=\"男\" title=\"男\" checked=\"\">\n" +
    "   <input type=\"radio\" name=\"usex\" value=\"女\" title=\"女\">\n" +
    "  </div>\n" +
    " </div>" +
    "</form>");
  //添加按钮
  $("#father").append("<div style=\"margin-left: 120px;\">\n" +
    "    <button type=\"button\" class=\"layui-btn layui-btn-primary layui-btn-radius\" onclick=\"addUserFinish()\">添 加</button>\n" +
    "    <button type=\"button\" class=\"layui-btn layui-btn-primary layui-btn-radius\">重 置</button>\n" +
    "  </div>");

  layui.use('form', function(){
    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    form.render();
    form.render('select' ,'test'); //刷新select选择框渲染
  });
}

以上这篇解决使用layui的时候form表单中的select等不能渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JS 控制CSS样式表
Aug 20 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
解决layer 动态加载select 失效的问题
Sep 18 #Javascript
webpack的tree shaking的实现方法
Sep 18 #Javascript
js实现窗口全屏示例详解
Sep 17 #Javascript
js实现简单页面全屏
Sep 17 #Javascript
js模拟F11页面全屏显示
Sep 17 #Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 #Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
layui table数据修改的回显方法
2019/09/04 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python合并多个excel文件的示例
2020/09/23 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
硕士生工作推荐信
2014/03/07 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
移交协议书
2014/08/19 职场文书
大明湖导游词
2015/02/03 职场文书
西双版纳导游词
2015/02/03 职场文书
春季运动会加油词
2015/07/18 职场文书
职工培训工作总结
2015/08/10 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android