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

         我想，我们经常能够遇到关于select设置高度的问题，当然一些组件或者插件或许可以解决。

   现在我也是在网上看了这位仁兄的解决方案http://blog.csdn.net/u012759397/article/details/69487752

   现在我也是把这个解决方案写一下，同时解析一下。

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

       其实还是得用到这个size属性，以及行内代码来进行解决，首先我先写一个案例

           html内容：

               <select class="my_selected" data-edit-select="1"  οnmοusedοwn="if(this.options.length>3){this.size=4}" οnblur="this.size=0" οnchange="this.size=0"  style="position:absolute;z-index:1;">

            <option selected>选择区服</option>
               <option>测试一区</option>
               <option>测试二区</option>
               <option>测试三区</option>
               <option>测试四区</option>
               <option>测试五区</option>
               <option>测试六区</option>
               <option>测试七区</option>
               <option>测试八区</option>  
               <option>测试九区</option>
               <option>测试十区</option> 
             </select>

       css内容：

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

       然后我对上面的代码进行一次解释。当然option的value没写，这并不是重点。

          前面我们谈到想要实现的效果就是下拉框之后，超出的部分用滚动条显示，而不是打开100条option的直接能通到太平洋。

        所以就会借助行内代码。

      <select class="my_selected" data-edit-select="1"  οnmοusedοwn="if(this.options.length>3){this.size=4}" οnblur="this.size=0" οnchange="this.size=0">

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

       onmousedown  鼠标按下事件，当鼠标按下的时候，进行select选择框的option判断，如果超过三个就把size设置为4，这样就会出现滚动条，懒得传图片。自己实验就很清楚。

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

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

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

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

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

   不过，还有一点，这样设置的select的下拉框还是很丑的，如果谁要是有更好的办法解决，可以告诉我。

   我上面写的代码可以直接拿过去用的，我后来把css文件的style直接写到行内了，所以你就可以试试。

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

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