解决使用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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
jQuery选择器实例应用
Jan 05 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
解决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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
javascript下string.format函数补充
2010/08/24 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
实例讲解React 组件
2020/07/07 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
python解包概念及实例
2021/02/17 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
党员教师工作决心书
2014/03/13 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
商业融资计划书
2014/04/29 职场文书
单位委托书怎么写
2014/08/02 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
用Python生成会跳舞的美女
2022/01/18 Python