解决使用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 相关文章推荐
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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实现查询两个数组中不同元素的方法
2016/02/23 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
Vue.js2.0中的变化小结
2017/10/24 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Python3遍历目录树实现方法
2015/05/22 Python
Python中生成Epoch的方法
2017/04/26 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python延时操作实现方法示例
2018/08/14 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Python 自由定制表格的实现示例
2020/03/20 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python ellipsis 的用法详解
2020/11/20 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
毕业生自荐书
2014/02/02 职场文书
银行类自荐信
2014/02/04 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
MySQL多表查询机制
2022/03/17 MySQL
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers
JS class语法糖的深入剖析
2022/07/07 Javascript