html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法《如何修改select默认option数量多余显示滚动条查看》大家可以去看一下,今天这篇文章整理是我在网上搜集的一篇完美解决select下拉框高度的解决方法,相当简单。
我们想要实现的效果是出现下拉框之后,超出的部分用滚动条显示,而不是打开100条option的直接能通到太平洋。那么如何设置select的高度呢?
大家都知道select有一个size属性,可以对其设定大小,这样就能控制显示下面想要显示几个option,然而你看到的是这个样子:
具体代码如下:
码云笔记
mybj123.com
前端教程
前端开发
Java教程
JavaScript教程
web前端笔记
WordPress
HTML教程
H5前端教程
React教程
vue教程
我们给select设置size=10,就出现如上图所示的情况,显然还不是我们想要的效果,所以就会借助行内代码。
主要的还是这几个事件进行处理。
onmousedown 鼠标按下事件,当鼠标按下的时候,进行select选择框的option判断,如果超过三个就把size设置为4,这样就会出现滚动条,懒得传图片。自己实验就很清楚。
然后接下来就是onblur事件,这个用于什么呢,这个是焦点事件,这样的话,在失去焦点的时候会触发,这样当你离开这个select的选择框的时候,点击一下其他地方就会使得这个size归零。然后就会变成最初的状态。也就是我们常见的下拉框初始状态。
还有一个onchange事件,这个在你选择的option在更改的时候就会触发,使得size归零,同时显示你所选择的option。这样就基本实现了下拉框的高度的问题处理。
当然这只是对下拉框的高度进行了设置,样式还是很丑陋,需要css优化,相信大家还有更好的方法,希望大家留言分享。
html 下拉框高度,如何自定义设置select下拉框高度的优化方法相关推荐
- 下拉框的高度html,设置select下拉框高度的一种方法
这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: 文学集 哲学 雅思 大学网奥数大学网奥数 文学集 哲学 雅思 大学网奥数 Layui:设置select下拉框自动选中某项 1.问题 ...
- 设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
- html select不允许选择,设置select下拉框不能选择
今天在做一个小功能的时候,需要对特定的一个select设置禁止选择,只好采用js进行控制,接下来吾爱编程为大家介绍一下设置select下拉框不能选择的方法,有需要的小伙伴可以参考一下: 1.功能需求: ...
- HTML如何设置select下拉框的默认值?
本篇文章给大家介绍设置select下拉框默认值的方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们可以在所需选项上使用"selected"属性来设置sel ...
- Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
- jquery 获取和设置 select下拉框的值(转手册)
##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...
- jquery 获取和设置 select下拉框的值
获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); ...
- bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
- php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
最新文章
- C++ cin cout
- php 数字加逗号,php数字满三位添加一逗号
- Linux系统下搭建BUG管理系统---禅道
- JS的jsonp是什么?5分钟学会jsonp跨域请求
- kaggle之手写体识别
- 动态规划实战4-leetcode 5.Longest Palindromic Substring
- SAS入门 新手必看
- C++对数计算log
- 中小学生计算机编程笔试,计算机编程笔试题
- Linux中使用cp命令报cp:omitting directory错误
- 小区管理系统之后台管理前端模板
- 拜托,大厂做项目可不简单!
- PyCharm 和 VScode 我更适合用哪个?
- 数据结构算法 - ConcurrentHashMap 源码解析
- Jmeter入门(一)使用Jmeter进行简单的性能测试
- Markdown插入url图片
- 企业微信发送图片失败
- 汉诺塔问题(递归算法思想)
- Spring框架概述
- 微信推文无缝滚动是这样炼成的
热门文章
- 软件测试周刊(第13期):质量是一种认知
- HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
- UE4 通过按键升降电梯
- python,调出黑白局部色彩照片,快去使用吧!
- RabbitMQ在windows10环境下安装步骤
- 南京信息工程计算机老师,南京信息工程大学计算机与软件学院导师教师师资介绍简介-姚永雷...
- 计算机毕业设计基于Android宠物领养救助系统app——计算机毕业设计
- STC单片机74hc164驱动8位数码管动态显示
- 数据结构算法之子集树
- 【机器学习面经】实验室祖传机器学习重难点(第一弹)