解决使用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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php正则表达式学习笔记
2015/11/13 PHP
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
javascript每日必学之封装
2016/02/23 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
详解python 内存优化
2020/08/17 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
微博营销计划书
2014/01/10 职场文书
化工专业自荐书
2014/06/16 职场文书
校本教研活动总结
2014/07/01 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
军事理论课感想
2015/08/11 职场文书