select下拉框设置高度的完美解决办法 |
您所在的位置:网站首页 › option宽度与select不一致 › select下拉框设置高度的完美解决办法 |
我想,我们经常能够遇到关于select设置高度的问题,当然一些组件或者插件或许可以解决。 现在我也是在网上看了这位仁兄的解决方案http://blog.csdn.net/u012759397/article/details/69487752
现在我也是把这个解决方案写一下,同时解析一下。 其实select有一个size属性,可以对其设定大小,这样能控制显示下面几个option,但是其下拉框又变得高,这个当然不是我们想要的,综合一下或许正好。那么这个问题怎么解决呢。 其实还是得用到这个size属性,以及行内代码来进行解决,首先我先写一个案例 html内容:
选择区服 测试一区 测试二区 测试三区 测试四区 测试五区 测试六区 测试七区 测试八区 测试九区 测试十区 css内容: .my_selected{position:absolute;z-index:1} 然后我对上面的代码进行一次解释。当然option的value没写,这并不是重点。 前面我们谈到想要实现的效果就是下拉框之后,超出的部分用滚动条显示,而不是打开100条option的直接能通到太平洋。 所以就会借助行内代码。
主要的还是这几个事件进行处理。 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操作一下实现,无聊的话倒是可以试试,会有点意思。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |