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下拉框中的内容太长显示不全的问题的更多相关文章

  1. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  2. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  3. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  5. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  6. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  7. python+webdriver,选取Select下拉框中的值

    在选择下拉框中的值时遇到了困难,用driver.find_element_by_id("").send_keys("")进行赋值不能成功获取下拉框中的值.   ...

  8. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  9. 解决select下拉框禁用（设置disabled属性）,后台获取值为空

    如果下拉框设置disabled属性后,提交表单到后台,后台获取的下拉框的值为空,以下有三种解决获取不到下拉框选项值的方法. 有下拉框html如:<select name="select ...

随机推荐

  1. Kafka Consumer

    Push VS Pull An initial question we considered is whether consumers should pull data from brokers or ...

  2. 《深入理解Java虚拟机》学习笔记(二)

    垃圾回收的前提是判断对象是否存活,对象不再存活时将会被回收,下面是2种判断的方法. 引用计数法: 主流的Java虚拟机并没有使用引用计数法来管理内存,重要的原因就是循环引用的问题难以解决. 可达性分析 ...

  3. BZOJ 2806: [Ctsc2012]Cheat [广义后缀自动机 单调队列优化DP 二分]

    2806: [Ctsc2012]Cheat 题意: 多个主串和多个询问串,每次询问将询问串分成多个连续子串,如果一个子串长度>=L且在主串中出现过就是熟悉的 如果熟悉的字符串长度>=询问串 ...

  4. 如何使用 Bootstrap 搭建更合理的 HTML 结构

    前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性.但是很多人在使用 Bootstrap 时只是依照文档盲目的复制黏贴,并没有仔细考虑每个类的用处,也 ...

  5. Office 365 机器人（Bot）开发入门指南 (新篇)

    最近在整理书稿时,发现我在2017年7月份写的这篇 Office 365 机器人(Bot)开发入门 的内容,因为相关平台的升级,已经完全不能体现当前的开发过程,所以我再专门写一篇新的开发入门指南给有兴 ...

  6. 本地创建yum源并安装lnmp

    注意:安装系统时,文件类型要未xfs类型,root要分配最多的空间 1.挂载安装光盘mount -t iso9660 -o loop CentOS-7-x86_64-DVD-1511.iso /mnt ...

  7. 一致性哈希（附带C++实现）

    在分布式集群中,对机器的添加删除,或者机器故障后自动脱离集群这些操作是分布式集群管理最基本的功能.如果采用常用的hash(object)%N算 法,那么在有机器添加或者删除后,就需要大范围的移动原有数 ...

  8. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  9. Java经典编程题50道之三十一

    将一个数组逆序输出. public class Example31 {    public static void main(String[] args) {        int[] a = { 9 ...

  10. 深入研究Sphinx的底层原理和高级使用

    深入研究Sphinx的底层原理和高级使用