zoukankan      html  css  js  c++  java
  • 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" 
                   οnmοusedοwn="autoWidth()" 
           		   οnblur="setWidth()" 
                   οnchange="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)选中第三项


  • 相关阅读:
    数据库异常处理记录
    FINEMVC重定向和显示合计
    有意思的文章的链接
    oralce 创建用户和权限
    FINEUI(MVC) grid 双击弹窗功能
    FINEUI(MVC)布局问题记录
    通过判断cookie过期方式向Memcached中添加,取出数据(Java)
    通过数组方式向Oracle大批量插入数据(10万条11秒)
    Python基础学习13--面向对象
    Python基础学习12--变量作用域
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314986.html
Copyright © 2011-2022 走看看