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

您所在的位置:网站首页 option宽度与select不一致 select下拉框设置高度的完美解决办法

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

2023-09-29 07:24| 来源: 网络整理| 查看: 265

         我想,我们经常能够遇到关于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