select超过10条选项就出现滚动条如何的实现？
3个回答
展开全部
可以用<select size=number>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
select{width:50px;}
</style>
<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>
<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","10");
}
//点击添加size属性
function selectClick(){
document.getElementById("select").removeAttribute("size");
document.getElementById("select").blur();
this.setAttribute("selected","");
}
//点击删除size属性
</script>
</body>
</html>
在select标签里加上“size=‘10’”属性时，确实出现了滚动条的样式，但当你点击其中一个option时却不会再收回去了，而且当页面刷新出来以后它一直展开着。要的效果应该是当点击select时出现只显示10行的列表并且有多于10条时会出现滚动条，而不是一个一直展开着显示10行并有滚动条但是不会再收起来的下拉列表。
所以，size属性只能时select显示10行并且一直显示。那我们就可以使用js的removeAttribute和setAttribute两个方法来实现当点击select时才添加size属性，在选中了一个option时再删除size属性，这样就可以实现我们要的效果了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
