HTML 为select自定义出现滚动条的条数

来源：互联网发布：plsql导出sql乱码编辑：程序博客网时间：2024/05/24 07:24

在一个网站开发的项目中，提供选项功能的select标签是必不可少的，但我们经常会遇到选项(option)太多以至于其呈现效果不那么友好。于是我们就想到了滚动条，但是怎么样才能自定义条数，当超过条数时出现滚动条这样的效果呢？

网上的答案我不是太看得懂。

我相信也有很多人看不懂，或者说不太有效。那么接下来我说说自己的实现方法。

首先，实现这个效果很重要的就是option标签的size属性，它可以定义展示出来的条数：

http://www.w3school.com.cn/tags/att_select_size.asp 这是w3c网站上的定义

当时当我们按照它的方法，只在select标签里加上“size=‘5’”这样的属性时，我们会发现它确实出现了一次只显示5行并且有了滚动条的样式，但当你点击其中一个option时却不会再收回去了，而且当页面刷新出来以后它一直展开着。

这就很尴尬了，我们要的效果应该是当点击select时出现只显示5行的列表并且有多于5条时会出现滚动条，而不是一个一直展开着显示5行并有滚动条但是不会再收起来的下拉列表。

所以大家就要关注重点了，size属性只能时select显示5行并且一直显示。那我们就可以使用JS的removeAttribute和setAttribute两个方法来实现当点击select时才添加size属性，在选中了一个option时再删除size属性，这样就可以实现我们要的效果了。

以下是JS版本，将代码复制到.html文件就可以预览效果：

<span style="font-size:14px;"><!DOCTYPE html><html><head><title></title></head><body><select id="select" onfocus="selectFocus()"><option onclick="selectClick()">1</option><option onclick="selectClick()">2</option><option onclick="selectClick()">3</option><option onclick="selectClick()">4</option><option onclick="selectClick()">5</option><option onclick="selectClick()">1</option><option onclick="selectClick()">2</option><option onclick="selectClick()">3</option><option onclick="selectClick()">4</option><option onclick="selectClick()">5</option></select><script type="text/javascript">function selectFocus(){document.getElementById("select").setAttribute("size","5");}function selectClick(){document.getElementById("select").removeAttribute("size");document.getElementById("select").blur();this.setAttribute("selected","");}</script></body></html></span>

大家应该注意到每个option都添加了onclick方法，这是为了在点击option时能够知道点击了哪一个，不过看起来很累赘的样子。如果想要改善这个方式的话可以用jQuery的选择器。

jQuery版本：

<!DOCTYPE html><html><head><title></title><script src="./jquery-3.1.0.js"></script></head><body><select id="select"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><script type="text/javascript">window.onload = function(){$("option").click(function(){$("#select").removeAttr("size");$("#select").blur();this.attr("selected","");});$("#select").focus(function(){$("#select").attr("size","5");})}</script></body></html>

如果你有更简单的办法，可以在评论直接告诉我或者将相关博文的地址发给我

1 0