解决使用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 相关文章推荐
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
如何用JavaScript实现一个数组惰性求值库
May 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php数据库备份还原类分享
2014/03/20 PHP
php发送邮件的问题详解
2015/06/22 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
javaScript实现一个队列的方法
2020/07/14 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python实现石头剪刀布小游戏
2021/01/20 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python如何调用字典的key
2020/05/25 Python
心理健康教育心得体会
2013/12/29 职场文书
函授本科自我鉴定
2014/02/04 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
贫困证明书范文
2015/06/16 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
使用Python解决图表与画布的间距问题
2022/04/11 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS