select下拉框设置高度的解决办法

本次说到select标签，也就是下拉菜单，一般都是搭配option选项一起使用，默认状态下有多少项就显示多少项，这样要是选项多的时候，下拉框会显示很多，影响美观。

select有一个size属性，可以对其设定大小，这样能控制一次性显示多少个option，但是其下拉框又变得很高，这个当然不是我们想要的，综合一下或许正好。那么这个问题怎么解决呢？

其实还是得用到这个size属性，以及搭配行内样式代码来进行解决，这里给个案例

html内容：

<select class="my_selected" data-edit-select="1" onmousedown="if(this.options.length>3){this.size=4}" onblur="this.size=0" onchange="this.size=0" style="position:absolute;z-index:99;">
  <option selected>==选项==</option>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  <option>选项4</option>
  <option>选项5</option>
  <option>选项6</option>
  <option>选项7</option>
  <option>选项8</option>
  <option>选项9</option>
</select>

css内容：

.my_selected{position:absolute;z-index:99}

然后对上面的代码进行说明。其中option的value没写，因为这并不是本次的重点。

前面我们谈到想要实现的效果就是下拉框之后，超出的部分用滚动条显示，而不是直接显示100条option，所以就需要借助行内样式来控制。

<select class="my_selected" data-edit-select="1" onmousedown="if(this.options.length>3){this.size=4}" onblur="this.size=0" onchange="this.size=0">

主要的还是对这几个事件进行处理。

onmousedown 鼠标按下事件，当鼠标按下的时候，进行select选择框的option判断，如果超过三个就把size设置为4，这样就会出现滚动条。

然后接下来就是onblur事件，这个用于什么呢？这个是焦点事件，在失去焦点的时候才会进行触发，这样当你离开这个select的选择框的时候，点击一下其他地方就会使得这个size归零。然后就会变成最初的状态。也就是我们常见的下拉框初始状态。

还有一个onchange事件，这个在选择的option要更改的时候就会触发，使得size归零，同时显示你所选择的option。这样就基本实现了下拉框的高度的问题处理。

当然还需要设置个重要的绝对定位absolute，因为你在触发更改这个size的时候，select下拉框的高度也会改变的，这样很有可能会影响到你所做的布局。所以要有一个绝对定位。

至于z-index当然是为了它展开的时候不能被其他的元素遮挡到。

这样就可以完美地处理这个select的高度设定事件了。

附加：

我在做ul标签使用了overflow：auto属性时，出现的滚动条让我实在是忍受不了，太丑了。然后就给它的外层加了个div，设定宽和高以及overflow：hidden属性，把宽度调整好了就会遮盖掉滚动条，同时不影响滚动效果。

那么想到这里，其实select的滚动条也可以遮盖掉的，只是要更复杂一些。难点就是完美拼接，可以给它一个绝对定位的div操作一下来实现，无聊的话倒是可以试试，会有点意思的。