码云笔记前端博客
Home > 前端技术 > 如何自定义设置select下拉框高度的优化方法

如何自定义设置select下拉框高度的优化方法

2018-11-19 分类:前端技术 作者:码云 阅读(1081)

本文共计868个字,预计阅读时长需要3分钟。

在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法《如何修改select默认option数量多余显示滚动条查看》大家可以去看一下,今天这篇文章整理是我在网上搜集的一篇完美解决select下拉框高度的解决方法,相当简单。

我们想要实现的效果是出现下拉框之后,超出的部分用滚动条显示,而不是打开100条option的直接能通到太平洋。那么如何设置select的高度呢?

大家都知道select有一个size属性,可以对其设定大小,这样就能控制显示下面想要显示几个option,然而你看到的是这个样子:

如何自定义设置select下拉框高度的优化方法

具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select size = 10>
    <option selected>码云笔记</option>
    <option>mybj123.com</option>
    <option>前端教程</option>
    <option>前端开发</option>
    <option>Java教程</option>
    <option>JavaScript教程</option>
    <option>web前端笔记</option>
    <option>WordPress</option>
    <option>HTML教程</option>
    <option>H5前端教程</option>
    <option>React教程</option>
    <option>vue教程</option>
</select>

我们给select设置size=10,就出现如上图所示的情况,显然还不是我们想要的效果,所以就会借助行内代码。

1
<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。这样就基本实现了下拉框的高度的问题处理。

当然这只是对下拉框的高度进行了设置,样式还是很丑陋,需要css优化,相信大家还有更好的方法,希望大家留言分享。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 如何自定义设置select下拉框高度的优化方法

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648069 次
  • 最近更新: 2019年10月21日