不少时候在页面中为了布局的需要，下拉列表<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. Spark(Hive) SQL中UDF的使用（Python）【转】

    相对于使用MapReduce或者Spark Application的方式进行数据分析,使用Hive SQL或Spark SQL能为我们省去不少的代码工作量,而Hive SQL或Spark SQL本身内 ...

  2. asp.net上传大文件-请求筛选模块被配置为拒绝超过请求内容长度的请求

    HTTP错误404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求,原因是Web服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大 ...

  3. 关于Android开发的一些个人总结（2016.04）

    引言 本文主要目标是整理下我在2016年第一季度针对Android学习的内容,不会深入细节,只是简单聊聊框架以及学习的方法. 我的Android之路 因为之前对Android有一个简单的接触,研究生期 ...

  4. BootStrapTable 文档

    文档包含了表格属性.列属性.事件.方法等等. 表格参数 表格的参数定义在 jQuery.fn.bootstrapTable.defaults. 名称   标签   类型   默认   描述   - d ...

  5. JAVA-JSP内置对象之application对象获得其他信息

    相关资料:<21天学通Java Web开发> application对象获得其他信息1.通过调用application对象的其他方法可以获得更多信息,如文件的MIME类型.获得指定Loca ...

  6. CTF之文件包含的猥琐思路

    From: i春秋 百度杯”CTF 一: <?php include "flag.php"; //包含flag.php这个文件 $a = @$_REQUEST['hello' ...

  7. facebook工具xhprof的安装与使用-分析php执行性能

    下载源码包的网址 http://pecl.php.net/package/xhprof

  8. 【Unity笔记】UGUI的Text文本框的大小随着文本字数变化

    需求:UGUI的Text文本框的内容会随着文本字数多少/换行而自动改变大小. 给Text加一个Content Size Filter组件(脚本),设置Horizontal Fit和Vertical F ...

  9. Postgresql分表与优化

    --1.创建主表 CREATE TABLE tbl_partition ( date_key date, hour_key smallint, client_key integer, item_key ...

  10. [开发笔记]-C#获取pdf文档的页数

    [操作pdf文档]之C#判断pdf文档的页数: /// <summary> /// 获取pdf文档的页数 /// </summary> /// <param name=& ...