select超过10条选项就出现滚动条如何的实现?
3个回答
展开全部
可以用<select size=number>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-10-25
展开全部
display:block
追问
不管用!
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<!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属性,这样就可以实现我们要的效果了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询