layui中layui-form与select2下拉多选样式冲突的解决方案

最新推荐文章于 2025-11-07 11:59:30 发布
原创 最新推荐文章于 2025-11-07 11:59:30 发布 · 6.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui-form #select2 #下拉框显示不全 #样式冲突

本文介绍了解决layui框架中layui-form组件与select2插件在下拉多选样式上发生冲突的方法。通过注释掉search按钮的样式并使用jQuery删除多余元素，实现了两者的兼容。

layui中layui-form与select2下拉多选样式冲突的解决方案@TOC

去掉搜索按钮

  1. 打开控制面板f12 查看元素
    在这里插入图片描述

可以看到搜索按钮是由after动态生成，找到这个样式文件，然后注释

  1. 清除浏览器缓存（ctrl+shift+del），刷新，可以看到
    在这里插入图片描述
    小按钮已经没有了。

去除layui-form的搜索框

layui-form
还是老样子 查看页面元素f12
layui-form
确定元素所在位置，通过jquery删除

$(".select2").next().remove();

删除后的效果
删除后的图片

layui select下拉二级联动
向宇
01-21 2050
以php语言为例 html <div class="layui-form-item layui-row layui-col-space15"> <label class="layui-col-xs3 relative"> <span class="color-green">报考学校</span> <select class="layui-select" required name="school_id" lay-.
layui输入下拉框使用select二级联动
weixin_43891086的博客
12-05 2184
在这里插入代码片 引入layui 脚本 ```<script src="<c:url value='/static/topayProfit/layui/layui.js'/>"></script> <script src="<c:url value='/static/topayProfit/layui/layui.all.js'/>">...
layui select下拉菜单联动(子下拉框根据父下拉框不同显示不同内容)
weixin_45345555的博客
08-28 1604
有不同的代理商,也就是店铺.不同店铺里会有不同的分类,点击代理商选择一个店铺,才能点击商品分类选择分类. 直接点商品分类是没有内容的 选择代理商之后再再点击商品分类即可看到该商铺下的分类 代码实现 <div class="layui-inline"> <label class="layui-form-label">代理商</label> <div class="layui-input-inline"> <sele
3大场景突破！formSelects：Layui生态下的高效多选解决方案
最新发布
gitblog_00620的博客
11-07 975
在Web开发中，多选组件（允许用户从列表中选择多个选项的交互控件）是提升表单效率的关键元素。传统HTML原生多选控件存在样式丑陋、交互生硬、功能单一等问题，而基于Layui框架的formSelects插件则通过**3大核心价值**彻底改变这一现状：**零侵入集成**（无需重构现有Layui表单）、**数据量级全覆盖**（支持从静态选项到百万级远程数据）、**性能损耗低于5%**（在IE8+环境下仍
layui form表单中监听select下拉菜单入坑
扶摇的博客
02-25 6573
文章目录使用Jquery实现对select的监听使用layui实现对select的监听入坑友情提示 这几天开始使用layui前端插件，但是完全没有习惯里面的一些监听事件。这不今天我写form表单中下拉select菜单监听就跳坑了！！！ 任务： 给两个下拉菜单，点击第一个下拉菜单，第二个下拉菜单完成值的改变。 有对比就有不同！ 使用Jquery实现对select的监听 页面代码 <form a...
layer和select2一起使用，导致select2下拉框无法显示的问题
chouzizi的博客
02-12 7268
今天使用layer插件做的弹出框中，使用了select2插件，但是select2插件的下拉框无法正常显示，很显然这是由于layer弹出层z-index值比较大，导致了select2的下拉框被遮住了。解决这个的方法一般就是增大select2下拉框的z-index值，或者减小layer的弹出框的值。虽然可以使用直接修改源码的方式去修改这个值，但是一般不建议这么做，因为这么做很可能会导致其他无法预料的问...
select2弹出层layer等冲突
cdf0701的博客
03-21 1762
select2和layer冲突 主要有几种方式： 1、修改layer默认z-index 2、select2加入参数dropdownParent: layero 3、修改select2-container–open的z-index大于layer
基于Layui的下拉多选框解决方案
基于Layui的下拉选择框多选解决方案，是前端开发中一个非常实用且常见的技术需求。Layui 是一款经典的轻量级前端 UI 框架，广泛应用于后台管理系统和企业级 Web 应用开发中。它以简洁的 HTML 结构、模块化的 ...
<!-- 顶部导航 --> <div class="header"> <div style="font-size: 22px;font-weight: 500;display: flex;align-items: center"> <img src="${pageContext.request.contextPath}/asserts/img/logo.png" style="height: 36px;margin-right: 10px;"> 智场通预约系统 </div> <div class="layui-dropdown"> <a href="javascript:;" class="layui-btn layui-btn-primary" style="color: white;background: transparent"> <i class="layui-icon layui-icon-user"></i> ${loginInfo.username}（${loginInfo.role == 0 ? '管理员' : '普通用户'}） <i class="layui-icon layui-icon-down"></i> </a> <ul class="layui-dropdown-menu"> <li><a href="javascript:logout();"><i class="layui-icon layui-icon-logout"></i>退出登录</a></li> </ul> </div>下拉框部分<div class="layui-dropdown"> <a href="javascript:;" class="layui-btn layui-btn-primary" style="color: white;background: transparent"> <i class="layui-icon layui-icon-user"></i> ${loginInfo.username}（${loginInfo.role == 0 ? '管理员' : '普通用户'}） <i class="layui-icon layui-icon-down"></i> </a> <ul class="layui-dropdown-menu"> <li><a href="javascript:logout();"><i class="layui-icon layui-icon-logout"></i>退出登录</a></li> </ul> </div>不展示如何解决呢？ </div>上述代码中
03-16
好的，用户遇到了Layui下拉菜单不显示的问题，需要解决方案。首先，我得回忆一下常见的Layui下拉框问题。根据提供的引用内容，有几个可能的原因和解决办法。 首先，用户可能没有正确加载`form`模块。Layui的组件...
Layui实现下拉多选功能
05-07
好的，我现在需要帮用户解决如何使用Layui框架实现下拉多选功能的问题。首先，我得回忆一下Layui的相关知识。根据用户提供的引用内容，引用[2]提到了layui实现下拉复选功能的例子，包括数据回显和上传，这应该是一个...
xm-select与React集成教程
[xm-select基于Layui的多选解决方案](https://img-blog.csdnimg.cn/5b3ec020f9b34978b58f34bfb4244f37.png) # 摘要 本文旨在介绍xm-select组件的全面使用和集成，从基础使用到高级场景，包括React环境搭建、属性与...
vxe ui ,layui, vue3 ,js（不能用其他ui框架）完成一个用户多选功能，可以筛选部门和状态，可以搜索，可以重置，表格分页，选取出来的在旁边显示出来，点击可删除
03-22
以下是基于Vue3+vxe-table+layui的解决方案（纯JavaScript实现，无npm环境）： ```html <!DOCTYPE html> <meta charset="utf-8"> 用户多选组件 <link href="https://cdn.jsdelivr.net/npm/layui@2.8.11/css/...
layui 弹出框中select第二次无法显示问题
TOP_Y的专栏
02-14 9523
今天帮哥们看了一个问题 用layui时，打开一个对话框，里面有select的时候，第一次可以生成下拉框，第二次就不可以了 具体代码如上，后来查阅源代码，layui.js没有找到相关，layer.js找到相关但是和select框生成无关，form.js才找到对应的问题 具体代码为 这个应该就是当js加载之后就加载的意思（大神请指教，表示js不是很懂，我猜的） 然后就是当第一
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
weixin_39752434的博客
01-16 1348
border-left: 5px solid #009688;注释：solid实体，实心样式；Blockquote：块引用;Fieldset：字段集;1.所有浏览器都支持 标签。fieldset 元素可将表单内的相关元素分组。 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表...
layui 多选下拉框 控件 样式改变原因
weixin_30708329的博客
06-27 4474
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //导致样式改变 <!DOCTYPE html> 转载于:https://www.cnblogs.c...
Layui select下拉二级联动，动态渲染下拉选项
qq_43024877的博客
11-04 556
项目场景 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
layui-下拉选择框
qq_39196922的博客
04-25 6127
这是官网上给出的例子 看起来还可以，其实实际上运行的话，选择框的长度是直接拉满的，很影响美观，如下图 代码如下 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select name="city" lay-verify="required">
【亲测免费】 layui-formSelects 常见问题解决方案
gitblog_07104的博客
09-13 868
**layui-formSelects** 是一个基于 Layui 框架的多选解决方案插件。它提供了丰富的功能，包括多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤等。该项目的主要编程语言是 JavaScript，使用了 HTML 和 CSS 来构建用户界面。 ## 新手使用注意事项及解决方案 ### 1. 依赖项问题 **问题描述**: 新手在使用 `layui-formSel...
select标签添加multiple属性后，页面呈现的样式发生改变，如何修改
积累点滴、持续总结、进而成长
03-13 9787
select标签当添加multiple属性后，是指明该下拉框可以进行多选，但是添加上multiple属性后，页面的呈现是样式会发生改变 也就是 页面会将所有的下拉框的值全部展示出来 此时，需要在select标签的内部再次添加属性：size=“” 里面的数值根据select中有几个值而定 这样基本样式可以改变 进行回填的时候，数值也不会再次发生改变 代码如下： select id="
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值