不少时候在页面中为了布局的需要，下拉列表<select>的宽度需要设成比较小的值，这时如果恰巧它包含的选择项<option>的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，或者你是个完美主义者，那这就成了一个不大不小的问题了。



在IE7+、Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。

function SetOptionTitle()

{

    var selects = document.getElementsByTagName("select");

    if (selects.length > 0)

    {

        for (var i = 0; i < selects.length; i++)

        {

            var options = selects[i].options;

            if (selects[i].options.length > 0)

            {

                for (var j = 0; j < options.length; j++)

                {

                    if (options[j].title == "")

                        options[j].title = options[j].text;

                }

            }

        }

    }

}

很不幸的是，IE6并不支持<option>的title属性，这一方法在IE6下完全无效！鉴于目前的浏览器市场状况，我们还不得不尽力兼容IE6，所以只能另想其它办法。



我目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下：

<!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></title>

<script type="text/javascript">

function FixWidth(selectObj)

{

    var newSelectObj = document.createElement("select");

    newSelectObj = selectObj.cloneNode(true);

    newSelectObj.selectedIndex = selectObj.selectedIndex;

    newSelectObj.onmouseover = null;

    

    var e = selectObj;

    var absTop = e.offsetTop;

    var absLeft = e.offsetLeft;

    while(e = e.offsetParent)

    {

        absTop += e.offsetTop;

        absLeft += e.offsetLeft;

    }

    with (newSelectObj.style)

    {

        position = "absolute";

        top = absTop + "px";

        left = absLeft + "px";

        width = "auto";

    }

    

    var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };

    if(window.addEventListener)

    {

        newSelectObj.addEventListener("blur", rollback, false);

        newSelectObj.addEventListener("change", rollback, false);

    }

    else

    {

        newSelectObj.attachEvent("onblur", rollback);

        newSelectObj.attachEvent("onchange", rollback);

    }

    

    selectObj.style.visibility = "hidden";

    document.body.appendChild(newSelectObj);

    newSelectObj.focus();

}



function RollbackWidth(selectObj, newSelectObj)

{

    selectObj.selectedIndex = newSelectObj.selectedIndex;

    selectObj.style.visibility = "visible";

    document.body.removeChild(newSelectObj);

}

</script>

</head>



<body>



<form method="post">

    <div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">

        <select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">

            <option id="A" title="this is A">AAAAAAAAAAAAAAA</option>

            <option id="B" title="this is B">BBBBBBBBBBBBBBB</option>

            <option id="C" title="this is C">CCCCCCCCCCCCCCC</option>

        </select>

    </div>

</form>



</body>



</html>

有了这个demo，我们就可以把其中的js提取出来，应用到项目中需要的地方了。



目前这种方式是给select注册了onmouseover，对于鼠标操作是没什么问题，如果用户是按tab键移动焦点就无效了。估计实际应用中这样的情形不会很多，所以暂不考虑，有兴趣的朋友可以再完善一下，或者看看有没有更好的解决方法。

转自：http://www.cnblogs.com/key/archive/2008/05/17/1201274.html

html固定宽度下拉框内容显示不全问题解决方法的更多相关文章

  1. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  2. easyui combobox下拉框中显示大于号小于号的问题

    前两天同事做了个功能,通过勾选下拉框里的值进行列表查询,结果下拉框里的值是“0<t<=2”.“2<t<=5”.“t>5”这样的. combobox是用脚本渲染出来的,里面 ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. [selenium]选取下拉框内容的方法

    说明:本文章主要是对select元素操作的讲解,非select元素的下拉框需要另外分析 1.select元素示例: 2.select下拉框选取的3种方法 WebElement selector = d ...

  5. 设置select下拉框高度的一种方法

    这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: <select style="position: absolute;z-index: 1;" onmou ...

  6. easyUI combobox下拉框很长，easyUI combobox下拉框如何显示滚动条的解决方法

    如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...

  7. Selenium WebDriver-操作下拉框内容

    操作下拉框中的内容 #encoding=utf-8 import unittest import time import chardet from selenium import webdriver ...

  8. PHP下拉框内容随单选框内容变化

    这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...

  9. layui下拉框不显示的问题

    1.先检查有没有引入layui.js 2.然后看有没有被<form class="layui-form"></form>包住, 3.查看是否有以下代码 &l ...

随机推荐

  1. delphi 学习笔记的例子

    由于360改变了共享策略,导致之前的共享连接不能使用 重新共享了下. http://yunpan.cn/cgS2DBRT572jy (提取码:1eda)

  2. hive查询遇到java.io.EOFException: Unexpected end of input stream错误

    hive查询遇到java.io.EOFException: Unexpected end of input stream错误 原因基本上有两个: 空文件 不完整的文件 解决办法: 删除对应文件- 参考 ...

  3. MyBatis教程目录

    MyBatis教程目录 2017-10-18  摘自 YSOcean MyBatis教程目录: 1 mybatis 详解(一)------JDBC 2 mybatis 详解(二)------入门实例( ...

  4. 【Ensemble methods】组合方法&集成方法

    机器学习的算法中,讨论的最多的是某种特定的算法,比如Decision Tree,KNN等,在实际工作以及kaggle竞赛中,Ensemble methods(组合方法)的效果往往是最好的,当然需要消耗 ...

  5. Python爬网——获取安卓手机统计数据

    [本文出自天外归云的博客园] 1. 在安卓网上对热门机型进行爬网,取前五十: # -*- coding: utf-8 -*- import requests,re from bs4 import Be ...

  6. C盘空间不够，清除VS下的 Font Cache

    C盘空间老是不够用.清除Font Cache 1.在 C:\Users\Jimmy\AppData\Local\Microsoft\Visual Studio 下的  Font Cache 目录可以干 ...

  7. xss绕过htmlspecialchars实体编码的姿势

    倘若是在script.input标签当中,即可突破.Payload ' oninput=alert`1` //      当要在input中输入内容时触发事件' oninput=alert`1` ' ...

  8. Servlet实例开发---学生管理系统

    Servlet总结 本程序采用Servlet开发技术,MVC分层,所有程序在设计时都要接口为操作的标准,主要逻辑操作只有增删改查. 具体实现操作请看源代码. 本程序采用的是MYSQL数据库,需加入相应 ...

  9. Python 读取数据

    将一个文件夹下面的图像和对应的pts读进来,然后把pts文件里面的数据读入一个数组,然后画到图像上: # -*- coding:utf- -*- """ 测试数据样例 & ...

  10. Java编程的逻辑 (31) - 剖析Arrays

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...