首页 > 其他 > 详细

给select标签设置下拉框高度

时间:2017-12-22 03:03:49      阅读:435      评论:0      收藏:0      [点我收藏+]

 

最近的需求涉及有下拉框,突然想到如果下拉选项过多的话可能要对下拉框的高度做一下限制,查了一下select标签,有size这个属性,原以为可以实现。

<!DOCTYPE html>
<html>
<body>

<select size="3" style="width:100px">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="audi2">Audi2</option>
  <option value="audi3">Audi3</option>
  <option value="audi4">Audi4</option>
  <option value="audi5">Audi5</option>
</select>
  
</body>
</html>

  实际如下显示:

技术分享图片

直接只设置size的话,select标签占size所设置的行数,并在size内滚动。

给select标签设置事件实现限制下拉选项过长时的效果

onmousedown:当选项数量超出某个值时,限制最大显示数量。

onblur:鼠标离开则收缩回一行

onchange:确定选项时收缩回一行

<!DOCTYPE html>
<html>
<body>

<select style="width:100px" onmousedown="if(this.options.length>3){this.size=4}" onblur="this.size=1" onchange="this.size=1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="audi2">Audi2</option>
  <option value="audi3">Audi3</option>
  <option value="audi4">Audi4</option>
  <option value="audi5">Audi5</option>
</select>
</body>
</html>

  实现效果:

未触发时:技术分享图片

触发时:技术分享图片

 

选择选项后:技术分享图片

 

给select标签设置下拉框高度

原文:http://www.cnblogs.com/basterdaidai/p/8083214.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!