html+下拉列表项太多,下拉列表的选项太多?试试这个
我们设计表格,应该尽可能地给使用的人提供方便实用的功能。在我们常见的下拉列表功能中,假如下拉列表的选项太多,使用者要使用鼠标一个一个地查找,这样很不方便。今天就给大家介绍一个实用的做法,制作一个支持关键字模糊匹配的下拉列表。也就是说,你输入一个关键字,下拉列表中只列出来包含这个关键字的选项,这样缩小了选择范围,选择时也就不会那么费劲了吧?看下图示例,我们输入以一个“米”字,则只列出了所有包含“米”字的选项。
而如果不输入任何内容的话,则列出所有选项。
下面介绍详细的操作步骤。
01添加辅助列
B列是下拉列表的选项,我们需要在F2单元格设置可以匹配关键字的下拉列表。
A列作为辅助列,辅助列的目的是为了找出那些包含关键字的选项。
在A2单元格输入以下公式并填充到A2:A28整个区域。
=COUNTIF(B$2:B2,'*'&$F$2&'*')
公式解释:Countif的第2个参数使用了通配符的形式'*'&$F$2&'*',这个表示包含F2单元格的内容。
第1个参数使用了混合引用,这样在下拉复制公式的时候,就形成了一个不断地扩展的区域,公式的结果就随着找到的记录的增加而增加。
看下图,我们在F2单元格输入“米”字,辅助列的结果就发生了变化,第一个找到“白米”,所以结果是1,到下一个选项“虾米”之间,所有的结果都是1。找到“虾米”时,就变成了2,意思是找了了2条符合的记录。这样我们可以看出来,所有符合的记录对应的辅助列的数字是第一次出现的自然数,1、2、3、4、5、6...
这就给我们取出这个列表提供了方便。
其实这种辅助列的方法,我在之前的文章中也有讲过,戳下面链接,找到第8种用法。
02生成符合条件的列表
在D2单元格输入以下公式,下拉填充到D2:D28整个区域。
=IFERROR(VLOOKUP(ROW()-1,A:B,2,0),'')
这样就得到了包含F2单元格内容的列表。我们以D2:D28中有数据的区域作为下拉列表的数据来源就可以了。
当然了,我们也可以不用A列的辅助列,直接用经典组合Index Small If就可以取出包含F2单元格关键字的列表。
在E2单元格输入以下公式并填充到E2:E28的整个区域。
这是数组公式,需要按Ctrl Shift Enter结束。
=IFERROR(INDEX($B$1:$B$28,SMALL(IF(ISNUMBER(FIND($F$2,$B$2:$B$28)),ROW($B$2:$B$28),2^20),ROW()-1),1),'')
2^20=1048576,是目前Excel表格的最大行数。
关于这个经典组合,请参考以下介绍。
注意:
数据验证(数据有效性)不支持内存数组,所以,想使用内存数组直接设置下拉列表的小伙伴们暂时就别想了。
03设置下拉列表
选中F2单元格,点击【数据】选项卡下面的“数据验证”(也就是之前的“数据有效性”)。
在弹出的“数据验证”对话框中,“允许”选项中选择“序列”,“来源”中输入以下公式。
=OFFSET($D$1,1,0,MAX($A:$A))
公式解释:MAX($A:$A)就得到了A列最大的数字,也就是包含F2单元格内容的选项的个数,我们也可以用Countif来得到,比如COUNTIF($B$2:$B$28,'*'&$F$2&'*');
用Offset生成动态的区域,可以根据F2单元格输入内容的不同而不断地变化。
关于Offset的用法,请戳以下链接。
最后,我们还需要去掉“数据验证”的出错警告。
这是因为,我们输入的关键字不一定是下拉列表允许的选项之一,也就是说可能会输入无效值,数据验证功能就会弹出警告对话框。为了去掉这个麻烦,所以取消勾选“输入无效数据时显示出错警告”。
其实这些用到的知识我们在之前的文章中基本上都有讲过,大家要学会融会贯通,举一反三。
小伙伴们,你们学会了吗?
--End--
html+下拉列表项太多,下拉列表的选项太多?试试这个相关推荐
- java 是怎么在中删除下拉列表_删除在一个下拉列表字段中选择的选项,并且不显示在该行中存在的其他下拉列表中不工作-jquery...
我有一个包含多列的html表,在两列中我显示下拉列表 . 当用户从一个下拉列表中选择值时(选择Product1或Select Product2下拉列表),我想删除在一个下拉列表中选择的选项,并且不要在 ...
- 下拉列表项过多会导致浏览器卡死
下拉列表项过多会导致浏览器卡死. 可以采用异步的加载方式,类似手机新闻的推送,定制下拉列表组件,一屏一屏的加载数据到浏览器端.
- java swt 下拉列表_求助:SWT 下拉列表
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 public class HelloWorldCombo {//下拉列表项 private static final String[] ITEMS = { ...
- jsp下拉列表java_java – JSP:下拉列表2取决于下拉列表1
我在处理两个链接下拉列表时遇到困难,下拉列表1将从数据库中获取值并根据用户的选择,它将在下拉列表2中获取相关记录. 我尝试在我的jsp中使用该代码执行此操作,但它不起作用,并且许多人建议使用javas ...
- Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
- HTML左侧下拉列表,HTML中的下拉列表 select
HTML中的下拉列表: Volvo Saab Opel Audi 其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文 ...
- outlook 服务器身份验证,Outlook 加载项中的身份验证选项
Outlook 加载项中的身份验证选项 06/22/2021 本文内容 Outlook 加载项可以访问 Internet 上任意位置的信息,无论是托管加载项的服务器.内部网络,还是云中的其他位置. 如 ...
- html5取消下拉菜单,Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)...
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击 ...
- bootstrap-select 插件 搜索下拉框 下拉选项太多导致下拉不显示
用bootstrap-select的做搜索下拉框的时候,如果下拉的选项太多的话,初次就会显示不出来,只有输入搜索内容时候才会显示内容.使用体验极为不佳.我用到的是1000+选项就会出现这问题. 看了源 ...
最新文章
- [学习笔记]圆方树广义圆方树
- 自定义LocaleResolver实现页面中英文切换
- 训练softmax分类器实例_第四章.模型训练
- JQUERY的parent()
- 【Mood 16 】史上最全github使用方法:github入门到精通
- 91.91p10.space v.php,luogu P1091 合唱队形
- 刚接触电子时,有过哪些百思不得其解的问题?
- logback-spring.xml
- 计算机的英语谚语,英语谚语大全_2017考研:计算机专业考研复习要点_沪江英语...
- 随想录(从DO-178C和ARINC653想到的)
- 1.2、安装Django-1.5.1及所需要的Python2.74环境
- 前端----表格的具体使用(jquery)
- java 日期计算类_日期类的加减及java中所以日期类的操作算法大全
- 计算机主板手工,高手在民间 DIY牛人打造实木机箱全纪录
- 计算机关机界面设置在哪里,windows 7 如何设置自动开关机
- 了解Java8中的parallelStream
- ir2113错误电路
- 【转】初探计算机视觉的三个源头、兼谈人工智能
- 用JAVA自己画一张二维码
- AAC 音频数据的两种格式