解决使用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页面倒计时实例
Jul 25 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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的Reflection反射机制
2014/08/05 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
python和go语言的区别是什么
2020/07/20 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
党建示范点实施方案
2014/03/12 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
春季防火方案
2014/05/10 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
心灵点滴观后感
2015/06/02 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
使用JS实现简易计算器
2021/06/14 Javascript
MySQL连接控制插件介绍
2021/09/25 MySQL
python 中的jieba分词库
2021/11/23 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android