解决使用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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
Vue详细的入门笔记
May 10 Vue.js
JavaScript如何利用Promise控制并发请求个数
May 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查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP curl使用实例
2015/07/02 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
js实现开关灯效果
2020/03/30 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
使用tensorflow实现AlexNet
2017/11/20 Python
简单实现python进度条脚本
2017/12/18 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
工地门卫岗位职责
2013/12/30 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript