解决使用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 16 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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生成Gif图片验证码
2013/10/27 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python实现发送和获取手机短信验证码
2016/01/15 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
对python的文件内注释 help注释方法
2018/05/23 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python集合常见运算案例解析
2019/10/17 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
元旦文艺汇演主持词
2014/03/26 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
公司委托书怎么写
2014/08/02 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
航班延误投诉信
2015/07/02 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
公司新员工欢迎词
2015/09/30 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
html粘性页脚的具体使用
2022/01/18 HTML / CSS
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL