layui的select框不出来怎么办

layuiselect框不出来是因为Layui会对select、checkbox、radio等原始元素隐藏,其解决办法就是加载form,并且执行一个实例即可。

layui的select框不出来怎么办

本教程操作环境:Windows7系统、layui1.0版,Dell G3电脑。

推荐:《javascript基础教程》《javascript基础教程》

今天用layui写前端页面时候用到了通过jqurey中的befor追加select元素

一开始写法:

        
              选择部门        北京             
---        
              选择人员        张三       
  
$(function(){$("#addpeop").click(function(){var peop=$("#addpeod");var t=$(['

登录后复制

页面内容:

3ff0cfdf53a8007b9cf6ffb0c8b975b.png

翻阅layui官方API发现

Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

所以当新添加这些元素以后需要对页面表单元素重新渲染一下

layui.use('form', function(){  var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功    //……    //但是,如果你的HTML是动态生成的,自动渲染就会失效  //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();  form.render();});

登录后复制

在script最后加上上面代码

dccabc46266fbaeba91889c8cd57d0f.png

问题解决了

注:用的layui 2.x版本其他版本可能会有差异

更多编程相关知识,请访问:javascript基础教程!!

以上就是layui的select框不出来怎么办的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005410.html

(0)
上一篇 2025年3月13日 00:56:14
下一篇 2025年3月7日 10:40:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • layui如何获取table某一行的值

    layui获取table某一行值的方法:首先打开相应的代码文件;然后使用“table.checkStatus(‘ID’)”方式获取table某一行的值即可。 本教程操作环境:Windows7系统、layui2.4版,…

    2025年3月13日
    200
  • 怎么设置layui默认的表格宽度

    设置layui默认表格宽度的方法:首先打开相应的代码文件;然后修改代码为“td{min-width: 150px;max-width: 200px;}”即可。 本教程操作环境:Windows7系统、layui1.0版,Dell G3电脑。 …

    2025年3月13日
    200
  • layui导入excel文件的方法是什么

    我们先来看看完成的效果图: (相关推荐:layui) 具体步骤如下: 首先:导入layui第三方插件js,地址: https://fly.layui.com/extend/excel/ 登录后复制 1、在页面中引入excel.js文件: /…

    2025年3月13日
    200
  • 为什么我的layui进度条渲染不出来

    解决思路如下: 提示:需要考虑静态渲染和动态渲染进度条两种情况。 (相关推荐:layui框架)            登录后复制 单独上面一段代码,进度条值是无法显示的。 (1)静态渲染  进度条依赖element组件,如果未引入,进度条将…

    2025年3月13日
    200
  • layui如何对表单标签进行校验

    本文为大家介绍layui对表单标签进行校验的方法,希望能够帮助到大家。 (学习视频分享:编程视频) layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。 required(必填项)phone(手机号)ema…

    2025年3月13日
    200
  • layui中怎么设置select项

    layui中设置select项的方法:首先创建一个HTML示例文件;然后通过ajax从后台请求获得select可供选择的元素;最后通过点击dl下某个确定的dd元素实现select的选择事件即可。 本教程操作环境:Windows7系统、lay…

    2025年3月13日
    200
  • 通过layui给数据表格添加序号

    具体方法如下: (学习视频分享:编程视频) 1、第一种需求,只给当前页加序号 (1)给你的数据加上 templet属性 ,cols: [[    {field:’tourPlayerId’, width:80, title: ‘ID1’, …

    2025年3月13日 编程技术
    200
  • 如何解决layui表单提交俩次

    “ 槽糕layui表单会提交俩次,你遇到过吗? ” 前言 使用这个layui已经快俩年时间了,刚刚新搭xadmin的框架,于是就出现了表单会重复提交这个问题,很懊恼啊! “ 如果你想直接知道解决方案,那就直接到第三小节即可。 ” 一、起初操…

    2025年3月13日 编程技术
    200
  • layui代码修饰器不显示样式怎么解决

    导语: layui代码修饰器官方说明文档: https://www.layui.com/doc/modules/code.html (学习视频分享:编程视频) layui作为一款轻量前端框架对于我们这种非专业前端还是挺好用的。但是我在使用代…

    2025年3月13日 编程技术
    200
  • ie8 layui不兼容吗

    layui是兼容ie8的,但是不支持IE6/7;准确来说layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。 本教程操作环境:Windows7系统、layui2.5.6版,Dell G3电…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论