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

最新推荐文章于 2024-06-20 16:16:46 发布

Jay_Wooz

最新推荐文章于 2024-06-20 16:16:46 发布

阅读量3.4w

点赞数 5

分类专栏：经验总结文章标签： html select 滚动条 Javascript jQuery

本文链接：https://blog.csdn.net/Jay_Wooz/article/details/52698832

版权

经验同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

总结

2 篇文章 0 订阅

订阅专栏

在一个网站开发的项目中，提供选项功能的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" οnfοcus="selectFocus()">
	<option οnclick="selectClick()">1</option>
	<option οnclick="selectClick()">2</option>
	<option οnclick="selectClick()">3</option>
	<option οnclick="selectClick()">4</option>
	<option οnclick="selectClick()">5</option>
	<option οnclick="selectClick()">1</option>
	<option οnclick="selectClick()">2</option>
	<option οnclick="selectClick()">3</option>
	<option οnclick="selectClick()">4</option>
	<option οnclick="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>

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

Jay_Wooz

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
HTML 为select自定义出现滚动条的条数

在一个网站开发的项目中，提供选项功能的select标签是必不可少的，但我们经常会遇到选项(option)太多以至于其呈现效果不那么友好。于是我们就想到了滚动条，但是怎么样才能自定义条数，当超过条数时出现滚动条这样的效果呢？网上的答案我不是太看得懂。我相信也有很多人看不懂，或者说不太有效。那么接下来我说说自己的实现方法。首先，实现这个效果很重
复制链接

扫一扫

专栏目录