select原生下拉框设置高度

发表于 | 分类于

select 原生下拉框设置高度…

问题描述

最近测试同事反映项目中的下拉选项框高度太大，都快撑出屏幕了
我百度、谷歌发现 select 在 ie 中默认30条，而 firefox 默认是20条，超出后才会显示滚动条，这显然和实际开发中有冲突
查了大半天都没有可行的解决方案，正打算放弃用原生，采用自定义 div + ul 去做的时候，无意间看了一篇可行的文章，现在记录下来以免忘记

解决办法

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select class="select" size="1" name="city" onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=1" onchange="this.size=1">
	<option value="" selected>请选择城市</option>
	<option value="1">北京</option>
	<option value="2">上海</option>
	<option value="3">广州</option>
	<option value="4">北京</option>
	<option value="5">上海</option>
	<option value="6">广州</option>
	<option value="7">北京</option>
	<option value="8">上海</option>
	<option value="9">广州</option>
	<option value="10">北京</option>
	<option value="11">上海</option>
	<option value="12">广州</option>
	<option value="13">北京</option>
	<option value="14">上海</option>
</select>

代码解释：

select 的 size 属性会显示下拉框中选项的数量，我们充分利用这个属性就行
onmousedown="if(this.options.length>6){this.size=7}"：鼠标点击的时候判断总得option个数,如果大于想要的个数就给size设置一个值
onblur="this.size=1" onchange="this.size=1"：失去焦点和改变的时候都把size设为1，只显示一个选项

参考链接：http://blog.csdn.net/u012759397/article/details/69487752