解决使用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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
Laravel日志用法详解
2016/10/09 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
javascript控制台详解
2015/06/25 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python isinstance函数介绍
2015/04/14 Python
python对json的相关操作实例详解
2017/01/04 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
生产车间主管岗位职责
2013/12/28 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
2015新年寄语大全
2014/12/08 职场文书
寒假社会实践个人总结
2015/03/06 职场文书