JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题
1、说明
有些情况下,select下拉框的内容过长,导致部分看不见;
现在通过鼠标事件,让下拉框中的内容显示完全
2、实现源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript解决select下拉框中的内容太长显示不全的问题</title> <script type="text/javascript"> /** * 自动设置select下拉框的宽度 */ function autoWidth() { //获取select中的ID var selectId = document.getElementById("select_option"); //自动设置下拉框的宽度 selectId.style.width = 'auto'; } /** * 设置select下拉框的宽度 */ function setWidth() { //获取select中的ID var selectId = document.getElementById("select_option"); //设置select下拉框的宽度为120 selectId.style.width = "120px"; } </script> </head> <body> <div id="select_div"> <select id="select_option" onmousedown="autoWidth()" onblur="setWidth()" onchange="setWidth()"> <option value="0">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option> <option value="1">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option> <option value="2">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option> <option value="3">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option> <option value="4">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option> <option value="5">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option> <option value="6">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option> <option value="7">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option> <option value="8">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option> <option value="9">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</option> </select> </div> </body> </html>
3、实现结果
(1)初始化时
(2)选中第三项
JavaScript解决select下拉框中的内容太长显示不全的问题的更多相关文章
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- javascript遍历select下拉框判断其中值是否与指定值相等
用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- python+webdriver,选取Select下拉框中的值
在选择下拉框中的值时遇到了困难,用driver.find_element_by_id("").send_keys("")进行赋值不能成功获取下拉框中的值. ...
- Javascript获取select下拉框选中的的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test" name=" ...
- 解决select下拉框禁用(设置disabled属性),后台获取值为空
如果下拉框设置disabled属性后,提交表单到后台,后台获取的下拉框的值为空,以下有三种解决获取不到下拉框选项值的方法. 有下拉框html如:<select name="select ...
随机推荐
- python3中time模块的用法及说明
python中,导入time模块使用的命令是 import time 可以使用以下命令查看time模块内置的能够使用的方法: dir(time) 可以使用以下命令查看time模块中每个内置方法的说明: ...
- AutoDesk Forge 获取令牌认证
创建应用程序 在开始使用Forge Platform之前,您需要设置一个应用程序并获取您的客户端ID和密码. 步骤1:登录Dev Portal 去开发门户网站:https://developer.au ...
- Java对正则表达式的支持(二)
正则表达式的主要用途: a.在目标字符串中找出匹配正则表达式的部分 b.校验目标字符串是否符合正则表达式,例如校验邮箱地址 c.在目标字符串中替换符合正则表达式的部分为其他的字符串 Scanner类是 ...
- 使用.bat来执行Java程序基础
将java程序做成可运行的jar后,又希望使用.bat文件来调用jar时,有几点需要注意的. 1.设置path和classpath .bat文件中扥的内容如下: @echo off set MY_HO ...
- BZOJ 2287. [HZOI 2015]疯狂的机器人 [FFT 组合计数]
2287. [HZOI 2015]疯狂的机器人 题意:从原点出发,走n次,每次上下左右不动,只能在第一象限,最后回到原点方案数 这不煞笔提,组合数写出来发现卷积NTT,然后没考虑第一象限gg 其实就是 ...
- Kibana安装配置
Kibana 是一个开源的分析和可视化平台,是ELK的重要部分.Kibana提供搜索.查看和与存储在 Elasticsearch 索引中的数据进行交互的功能.开发者或运维人员可以轻松地执行高级数据分析 ...
- offset / scroll / client Left / Top
1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...
- 编译预处理命令define
#include 包含指令 将一个源文件嵌入到当前源文件中该点处. #include<文件名> 按标准方式搜索,文件位于C++系统目录的include子目录下 #include" ...
- [Python Study Notes]with的使用
在 Python 2.5 中, with 关键字被加入.它将常用的 try ... except ... finally ... 模式很方便的被复用.看一个最经典的例子: with open('fil ...
- 【Tools】Pycharm 2018专业版 linux安装教程 附2018专业版密钥
Linux安装pycharm2018专业版 1. 下载安装包 Pycharm下载地址:http://www.jetbrains.com/pycharm/download/ 2.终端打开你的安装包所在路 ...