解决使用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单例模式的两种方案
Oct 22 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
原生JS实现烟花效果
Mar 10 Javascript
Javascript实现关闭广告效果
Jan 29 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安全配置方法
2007/06/16 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
再谈javascript原型继承
2014/11/10 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python对象与引用的介绍
2019/01/24 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python多进程编程常用方法解析
2020/03/26 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
AJAX的优缺点都有什么
2015/08/18 面试题
班级安全教育实施方案
2014/02/23 职场文书
求职自我推荐信
2014/06/25 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
满月酒邀请函
2015/01/30 职场文书
司机个人年终总结
2015/03/03 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS