解决使用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 实现的全选和反选
Apr 15 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
详解webpack 热更新优化
Sep 13 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
JQuery之focus函数使用介绍
2013/08/20 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python3实现多线程聊天室
2018/12/12 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python 深度学习中的4种激活函数
2020/09/18 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
中专自荐信
2013/10/13 职场文书
培训讲师邀请函
2014/01/10 职场文书
六五普法规划实施方案
2014/03/21 职场文书
学习交流会主持词
2014/04/01 职场文书
关于工作经历的证明书
2014/10/11 职场文书
党员个人年度总结
2015/02/14 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书