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. c#控制WPF程序自动登录（Automation方式实现）

    说明:winForm窗体,可以通过win32接口dll的findWindow之类的函数来实现查找winform窗口,mfc窗口等. 但是wpf却是不实用这些,可以靠automation方式来进行操作. ...

  2. Vsftp的PASV mode（被动模式传送)和Port模式解释

    什么叫做PASV mode(被动模式传送)?他是如何工作的?FTP的连接一般是有两个连接的,一个是客户程和服务器传输命令的,另一个是数据传送的连接.FTP服务程序一般会支持两种不同的模式,一种是Por ...

  3. vsftp实现只能上传不能下载、删除权限配置

    vsftpd可以对每个用户特别限制.只要给那个用户建立一个设置文件,然后在文件里设置 在vsftpd.conf里加user_config_dir=/etc/vsftpd/vsftpd_user_con ...

  4. verilog实验1：基于FPGA蜂鸣器演奏乐曲并数码管显示

    一.实验任务 利用FPGA进行代码开发,使蜂鸣器演奏出乐曲<生日快乐>,将音调显示在数码管.原理为蜂鸣器为交流源蜂鸣器,在引脚上加一定频率的方波就可以发声,而且发声的频率由所加方波决定.这 ...

  5. 不要用for循环去遍历LinkedList

    ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...

  6. Java设计模式——策略模式

    策略模式的定义: 策略模式其实特别好理解,俗话说得好,条条大路通罗马,做的都是一件事,实现的方式却可以千万种,在这种情况下,如何使得每个人都可以根据自己的喜好来选择具体的方式,在调用时可以根据不同方式 ...

  7. 使用最小堆优化Dijkstra算法

    OJ5.2很简单,使用priority_queue实现了最小堆竟然都过了OJ……每次遇到relax的问题时都简单粗暴地重新push进一个节点…… 然而正确的实现应该是下面这样的吧,关键在于swap堆中 ...

  8. bzoj 1598: [Usaco2008 Mar]牛跑步 [k短路 A*] [学习笔记]

    1598: [Usaco2008 Mar]牛跑步 题意:k短路 ~~貌似A*的题目除了x数码就是k短路~~ \[ f(x) = g(x) + h(x) \] \(g(x)\)为到达当前状态实际代价,\ ...

  9. [Sdoi2017]序列计数 [矩阵快速幂]

    [Sdoi2017]序列计数 题意:长为\(n \le 10^9\)由不超过\(m \le 2 \cdot 10^7\)的正整数构成的和为\(t\le 100\)的倍数且至少有一个质数的序列个数 总- ...

  10. BZOJ 2055: 80人环游世界 [上下界费用流]

    2055: 80人环游世界 题意:n个点带权图,选出m条路径,每个点经过val[i]次,求最小花费 建图比较简单 s拆点限制流量m 一个点拆成两个,限制流量val[i],需要用上下界 图中有边的连边, ...