关于layer.open与select2联合使用时，select2出现的错位问题的解决

最新推荐文章于 2024-05-16 06:16:29 发布
最新推荐文章于 2024-05-16 06:16:29 发布
阅读量2.8k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ks8380/article/details/85062315
版权

正常显示情况如下：

当我切换到其他页面，再重新切回原页面的时候，出现这样的问题：

此类情况出现时，不是select2插件出现的问题，而是layer的问题   

layer 有一个弹出层动画  anim ，默认为 0  ，正是因为anim的动画效果导致切换页面重新切回的 时候，会重新执行一遍动画效果，导致select的定位不准确，出现了select的错位情况，解决办法是： 设置 anim：-1

冰魂破
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layer.open回显数据select选择默认值
猿小白的博客
08-28 1万+
1. 需求分析 如图所示，需要在用户编辑的时候能够回显数据，并且使其能够自动渲染下拉框。 <div class="layui-form-item"> <label class="layui-form-label">用户性别：</label> <div class="layui-input-block"> &lt...
Openlayers实战：select简介及select选择feature实战
大剑师兰特的GIS世界
08-18 432
Select是交互事件中的一种，用于选择矢量图层上的几何图形，添加选择交互事件后，点击地图上的几何图形或者将鼠标移动到几何图形上时，将获取到几何图形的相关信息，我们可以将选择的几何图形进行高亮显示。
Layer中使用select2如何避免样式问题
Mr_王小峰的博客
11-07 1134
在layer open中使用select2会出现样式冲突无法加载。我的解决思路是layer有一个success方法，在页面加载完的时候使用success方法重新加载select2 样式。 具体实现代码逻辑： layer.open({ type: 1, title:'面试结果', shift: 7, ...
layer.open弹出层下拉框select失效
weixin_42200954的博客
04-19 2157
弹出层的下拉框不起作用如下： layer.open({ type: 1, anim:2, title:'编辑修改', area:['400px','550px'], btn:['保存','关闭'], content: '<form class="layui-form" id="content_data" >' + ' <div class="layui-form-item">\n' + ' <label class="layui-fo
layui table 行内下拉框select不显示的解决办法（进一步优化）
最新发布
ylens的博客
05-16 397
之前写过一个文章：layui table 行内下拉框select不显示的解决办法。地址：https://blog.csdn.net/ylens/article/details/136075856，在使用过程中发现下拉框显示不完整。
select2 使用详解
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
01-26 3万+
构造函数：2.5.2版本：（具体详见http://select2.github.io/select2/#documentation）参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量的字符minimumResultsForSearchInt最小数量的结果maximu...
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
然而，在实际使用过程中，用户可能会遇到一个问题，即在使用 `layer.open` 打开窗体时，会伴随有遮罩层的出现，这可能会影响用户体验。本文将详细讲解如何解决这个问题。 首先，我们要了解遮罩层在 Layui 中的作用...
解决layer.open后laydate失效的问题
10-16
今天小编就为大家分享一篇解决layer.open后laydate失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui layer.open()中的select,radio不显示.zip
01-06
layui layer.open()中的select,radio不显示.zip
解决在layer.open中使用时间控件laydate失败的问题
10-16
本文主要讨论的是如何在使用layer.js库打开的弹窗（弹层）中正确地集成laydate时间控件，以及解决在这个过程中可能出现的问题。 layer.js 是一款非常流行的JavaScript弹层组件，它提供了丰富的弹层样式和功能，包括...
Vue+Openlayer中使用select选择要素
~~
08-26 1828
效果图： 实现代码： <template> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </template> <script> import "ol/ol.css"; import { Map, View } from "ol"; import { OSM, Vector as VectorSource } from "ol/source";..
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
热门推荐
飞起来的小猪的博客
12-05 3万+
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
layer.open 下无法获取select选中的值
wjm0519的博客
03-02 1474
问题：我将layer.open 下的content：内容写在body内，通过onchange事件无法获取select选中的值 html代码 <div style="display: none" id="labeladdBox"> <form class="form-horizontal" style="margin-top: 50px;"> ...
layui中layer.open中select失效，表格中插入图片，checkbox是否选中，查看大图，parent.layer.open中失效
hangGe0111的博客
12-18 1763
弹窗官网地址：http://layer.layui.com/ 1.在使用layui时layer.open的弹窗使用十分方便，普通弹窗可以满足普通需求，prompt可以满足一个input框的需求，但如果有两个输入框或者有select时，就需要用到自定义弹窗了； 2.select失效 2.1失效原因是.layui-layer-page .layui-layer-content{overflow:...
layui 动态select二级联动
qq_28404381的博客
11-18 1165
功能 可增删二级联动select select选项联动 界面 select 选项联动主要代码 # select 标签部署 <div> <label>语音标签1</label> <select lay-filter="selectType"> # data-audio的值，与语音文件的name相关 <option value="1" data-audio="1">语音标签1</option> <option v
Layui select下拉二级联动，动态渲染下拉选项
qq_43024877的博客
11-04 422
项目场景 select下拉二级联动： html代码： @Override <div class="layui-inline" style="width: 330px;"> <label class="layui-form-label">所属车队</label> <div class="layui-input-block" style="width: 200px;position: absolute
弹出层layer中的select2问题
请叫我小明 （坐标：西安）
05-10 252
最好的办法，不要在页面加载时初始化select2；在功能和美化之间，需要权衡；
select2弹出层layer等冲突
cdf0701的博客
03-21 1643
select2和layer冲突 主要有几种方式： 1、修改layer默认z-index 2、select2加入参数dropdownParent: layero 3、修改select2-container–open的z-index大于layer
layer.open中使用layer.alert()或者layer.msg嵌套问题
11-03
layer.alert()和layer.msg()是layer中常用的弹窗方法，可以在layer.open()的success事件中嵌套使用。具体实现方法如下： 1. 在layer.open()的success事件中使用layer.alert()或者layer.msg()方法，例如： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值