解决使用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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
mailto的使用技巧分享
Dec 21 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue组件与复用详解
Apr 08 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP新手入门学习方法
2011/05/08 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP时间函数使用详解
2019/03/21 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
用 JSON 处理缓存
2007/04/27 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
TypeScript入门-接口
2017/03/30 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
google广告之另类js调用实现代码
2020/08/22 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python按行读取文件的简单实现方法
2016/06/22 Python
Python实现的栈(Stack)
2018/01/26 Python
python实现excel读写数据
2021/03/02 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
C#公司笔试题
2014/03/28 面试题
办护照工作证明范本
2014/01/14 职场文书
学习保证书范文
2014/04/30 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
单位委托书格式范本
2014/09/29 职场文书
小学教师教学反思
2016/02/24 职场文书
Python利用folium实现地图可视化
2021/05/23 Python