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)选中第三项


  • 相关阅读:
    poj 1654(利用叉积求面积)
    poj 3230(初始化。。动态规划)
    hdu 1392(凸包)
    hdu 1348(凸包)
    hdu 1147(线段相交)
    hdu 1115(多边形重心问题)
    POJ 2373 Yogurt factory
    GCJ 2008 APAC local onsites C Millionaire
    FZU 1397 保送
    FZU 1064 教授的测试
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314986.html
Copyright © 2011-2022 走看看