select2下拉框的显示及隐藏

Bootstrap 4风格的select2下拉框 https://math-digital.cn/blog/8 阅读详情

select2下拉框,当输入框没有输入值的时候,点击输入框不显示所有数据,只有输入值了才把下拉框显示出来,由于没有找到官方提供的接口,所以用jq的一些方法实现。
首先在css里把下拉框先隐藏了

.select2 - container--classic.select2 - container--open.select2 - dropdown {
        display: none;
    }
.select2 - container--classic.select2 - container--open.select2 - container--below.select2 - selection--multiple {
        border - radius: 4 px;
        border - bottom: 1 px solid #5897fb;
    }

然后利用输入框的input事件,做js处理

//当输入框值改变时改变下拉框的显示隐藏状态
//$('#sendMultiBox')是父节点,利用事件代理的方法,因为此时输入框没有渲染出来
$('#sendMultiBox').on('input', '.select2 .select2-search__field', function () {
    var timer = setInterval(function () {
        if ($('.select2-container .select2-results__options')[0]) {
            clearInterval(timer);
            if ($('#el+.select2 .select2-search__field').val()) {
                $('.select2-container--classic.select2-container--open .select2-dropdown').css('display', 'block');
                $('.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple').css({
                    "border-radius": "4px",
                    "border-bottom": "1px solid #aaa;"
                });
            } else {
                $('.select2-container--classic.select2-container--open .select2-dropdown').css('display', 'none');
                $('.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple').css({
                    "border-radius": "4px",
                    "border-bottom": "1px solid #5897fb;"
                });
            }
        }
    }, 10);
});

当输入框内的值删除或者增加的时候也做一下下拉框显示隐藏处理

var saveData = []; //设置全局变量存储当前输入框数据
$('select').on("change", function () {
    var data = $('select').select2('data'); //获取输入框里的数据
    if (saveData.length > data.length) { //当输入框里数据减少时
        $('.select2-container--classic.select2-container--open .select2-dropdown').css('display', 'none'); //输入框添加时把下拉框隐藏
        $('.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple').css({
            "border-radius": "4px",
            "border-bottom": "1px solid #5897fb;"
        });
    } else if (saveData.length < data.length) { //当输入框里数据增加时
        $('.select2-container--classic.select2-container--open .select2-dropdown').css('display', 'none'); //输入框添加时把下拉框隐藏
        $('.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple').css({
            "border-radius": "4px",
            "border-bottom": "1px solid #5897fb;"
        });
    }
    saveData = data;
})
layui中使用JavaScript监听下拉框(select)的变化,根据选中的值来决定是否显示或隐藏input元素 HTML和CSS用于设置网页的基本结构和样式,而JavaScript则用于实现交互功能,比如根据下拉框的选项来控制input元素的显示或隐藏。 阅读详情

相关推荐

人形机器人骨骼材料选型实战:从铝合金到碳纤维的5种方案对比

本文深入探讨人形机器人骨骼材料的选型策略,对比铝合金、镁合金、钛合金、碳纤维复合材料及3D打印材料等5种方案的性能优劣。通过建立强度-重量比、疲劳寿命等核心评价维度,结合具体应用场景,提供科学的材料决策方法论,助力开发者优化机器人结构设计,实现性能与成本的平衡。

weixin_29199873的博客 440

select2插件使用及样式修改

select2插件使用及select2插件样式修改

qq_43486404的博客 4316

Synopsys SCL许可证服务器搭建详解:从安装到生成.dat文件

本文详细解析了Synopsys SCL许可证服务器的完整搭建流程,从系统环境准备、SCL安装到生成.dat文件。重点阐述了如何正确获取HOST ID、配置License文件以及调试常见故障,为数字芯片设计工程师提供了一套从零到一的实战避坑指南,确保EDA工具链稳定运行。

weixin_29306011的博客 612

iview select 组件控制下拉隐藏或显示

iview 的select主键只提供了下拉框展开或收起时触发事件,没法手动控制下拉隐藏或显示,查看源码后发现内部是用visible变量控制是否显示下拉,通过改变子组件visible变量就可以了,例:this.$refs.select.visible = true ...

码上飞翔 2163

QT下利用FFTW实现功率谱密度分析(周期图法)

写在前面 出于项目需求,需要在QT的msvc 2015编译环境下实现功率谱密度估计。 所以这个需求很直接的关键词就是 1. C++ 2. QT 3. 傅里叶变换 4. 功率谱密度估计 但是在网上搜索了很久,没有一个非常直接的答案。所以我觉得很有必要写一篇文章来说明,在QT msvc2015 32bit环境下如何实现功率谱密度估计。 本文并没有经过严格编辑,但代码是已经可以跑通的,如...

李时珍食疗志的博客 5223

Cox构建预测模型(5):如何用R语言绘制校准曲线(附全套代码)

这篇文献通过绘制两个模型的DCA曲线来评估模型的临床决策实际需求,一个是列线图模型,包括纳入列线图的全部变量,一个是TNM模型,只纳入TNM分期3个变量。A图是训练集1年、3年、5年患者的总生存期的DCA曲线;B图是训练集1年、3年、5年患者的总生存期的DCA曲线,红色线条代表列线图模型(包括构建模型的10个变量),黄色线条代表TNM模型(仅纳入TNM分期3个变量),两个模型对比,在绘制校准图之前,必须要完成数据的导入、拆分数据集的工作、预测因子的筛选,校准图的绘制是分别在训练集与验证集独立进行的。

qq_37610365的博客 1360

解决select2在bootstrap模态框中下拉框隐藏的问题

修改select2-container--open类 .select2-container--open { z-index: 9999999 !important; }  

qq_34075559的博客 5035

S32K344 Bootloader实战:一个按键实现从Boot到App的无缝跳转(附完整代码)

本文详细介绍了基于NXP S32K344微控制器的Bootloader开发实战,重点解析如何通过一个硬件按键实现从Boot到App的可靠跳转。内容涵盖内存分区规划、中断向量表重映射、外设初始状态管理等核心要素,并提供了完整的代码示例和调试技巧,适用于汽车电子和工业控制等高可靠性应用场景。

weixin_29192365的博客 307

el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏

【代码】el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏。

qq_44716001的博客 2062

10、X射线聚焦与光学元件技术解析

本文深入解析了X射线聚焦与光学元件技术,重点讨论了椭圆镜的聚焦原理及局限性,多层镜的设计优化及其突破性应用,以及X射线波导的基础理论和模式求解方法。文章还总结了这些技术的优势、局限及其在材料科学、生物学和医学等领域的广泛应用前景。通过理论推导与技术改进,这些光学元件为X射线成像技术的发展提供了重要支撑。

pz890123的博客 121

黑猫带你学eMMC协议第9篇:eMMC初始化过程(initial)

本文依据eMMC JEDEC5.1及个人工作经验整理而成,如有错误请留言。 文章为个人辛苦整理,付费内容,禁止私自转载。 文章所在专栏:《黑猫带你学:eMMC协议详解》 1 什么是emmc的初始化 对于小白来说,可能不太明白什么是emmc初始化。举个栗子:当你拿到一个电脑,接上电源,是不是就立马可以用了呢?并不是吧,你还需要去开机,等待电脑启动,配置完各种参数,等出现了电脑桌面,你才能用。那么同样,对于emmc芯片来说,也不是提供电源就能用了,需要输入各种命令后,让其进入到tran state后,才能正.

黑猫奥利奥的博客 6742

Jquery两个插件的搭配使用: Select2 和 popover验证

1、使用的插件: (1)select2-3.5.2/select2.min.js (2) jquery.validate.bootstrap.popover.js、jquery.validate.min.js 2、应用环境 首先看一下设计需求(见下图): 页面中“Select one or more branch”处可以多选,使用的是select2插件,这里真正的select...

ppxin的专栏 561

Nerf 训练自有数据

colmap相机位姿转为LLFF格式数据

zfjBIT的专栏 2309

Select2插件的隐藏、设置宽度

<select id="selPrinvice" class="Select2 select2-hidden-accessible" style="width:120px;" data-select2-id="selPrinvice" tabindex="-1" aria-hidden="true"><option value="" data-select2-id="4"&g...

weixin_30575309的博客 944

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

select 下拉框 传值到后台和从后台传值到前端显示

1. select 下拉框,选择值后传值到后台 &lt;input type="hidden" id="state" name="state" id="state" class="projectfile" value="${model.state}" /&gt; &lt;select class="form-control projectfile&qu

weixin_39209728的博客 2万+

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

记一次select2的使用及遇到的问题

主要应用功能为:实现下拉框可搜索功能 1. jsp页面     &lt;select id="sltunitlist" class="select2" style="width:100%;"&gt;&lt;/select&gt;     引用select2.min.js及select2.min.css     可以到select2官网下载对应版本的库 2. js页面     $(fun...

sinat_36279113的博客 794

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

select2插件常用方法汇总

1.获取下拉框的value和text &lt;input type="hidden" name="xa" id="xa" data-placeholder=".." style ="width: 360px;"/&gt; //获取value值 $("#xa").val(); $("#xa").select2("val&q

weixin_34252090的博客 177

使用HTML5自定义一个下拉框

HTML5 本身并没有直接提供一种方式来“自定义”下拉框,但你可以使用 HTML、CSS 和 JavaScript(如果需要更复杂的功能)来模拟一个下拉框。以下是一个简单的示例,它使用了一个隐藏的。如果你需要更复杂的功能(例如,支持键盘导航、搜索选项等),你可能需要使用 JavaScript 或一个专门的库(如 Select2、Chosen 等)。注意,这个示例使用了 Font Awesome 的图标来增强视觉效果,但这不是必需的。元素来模拟下拉框的选项,并通过点击来显示和隐藏这个。,从而显示下拉选项。

王铁柱666的博客 361

解决el-select超长选项时不出现横向滚动条问题

如果只设置组件下拉框的max-width,那么超长的选项超长默认会使用...进行隐藏,显示如图: 想要显示横向滚动条需要两个步骤 ① 显示选项超长部分 ② 将选项item的display属性设置成block 代码如下: <el-select v-model="value" placeholder="请选择" popper-class="my-select-dropdown"> <el-option v-for="item in options" :ke

catfishlyf的博客 2302

常用的js 总结

1、点击一个按钮,跳转到新页面 $("#btnCancel").click(function(){ location.href="${ctx}/engine/formula/"; }); 2、使用jquery Validate 验证后,运算ajax 进行计算 $("#btnCalculate").click(function(){ if($("#inputForm").va...

weixin_33937913的博客 78

el-scrollbar滚动条分析

现在把box2的宽度该称高跟box2相同的300px,是不会出现滚动条的,但是如果box2里面的元素的宽度大于了box1的宽度,那么box1仍然会出现滚动条,这也就是说,只要box1里面的元素超出了范围,不管是不是直接子元素,都会出现滚动条。为了看懂el-scrollbar的滚动条,先看一个水平滚动条的示例:一个box1里面套了一个box2,其中box2的宽度和box2的宽度相等,这种情况下,box1在水平方向上是没有滚动条的(box1使用了overflow-x:auto)。移动下位置试试,如下。

pscool的博客 940

HTML中Select的隐藏与显示

转载自品略图书馆http://www.pinlue.com/article/2018/11/2303/047596163137.html 在html中有一种情况,如果用户想隐藏现有页面的下拉框;但是问题是,当前页面的下拉框默认的有隐藏和显示的,那么面对这种情况可能是很多人都会想到有一个iframe来覆盖这些下拉框,这样就也了啊,可是这个是可以解决当前的问题了,可是这个好像不是最终的方案了,以下...

yihuliunian的博客 5360

JS——设置select默认值,及隐藏下拉框选项

实现功能大概是这样:(页面有点槽,该引的都没引,将就看吧.........) 先说默认值 这是页面选框 <td>@*<input type="text" name="level">*@ <select name="level" id="level"> <option value="">——请选择等级——</option> ...

Lazyinit的博客 1万+

ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏

场景 在el-select的下拉框中,下拉选择指定的下拉项时才会显示后面的单选框,否则不显示。 效果如下 实现 首先在页面中添加这两个控件 <el-row> <el-col span="10"> <el-form-item label="班次类型:" prop="bclx"> <el-select v-model="form.bclx" placeholder="请选择班次类型"

srz1128的博客 4713

vue中select下拉框option的显示与隐藏

效果图 下拉框option的显示与隐藏 实现的代码 <template> <div class="am-u-lg-10"> <div class="am-u-lg-10-left"><span>*</span>悬浮时间:</div> <select ..

qq_62449212的博客 6937
上一篇: js 监测按键退格事件
下一篇: javascript 对象的防篡改几种办法
haogemr
博客等级 码龄9年 71粉丝 87原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值