不少时候在页面中为了布局的需要，下拉列表<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. MyBatis 问题列表

    问题表现:The content of elements must consist of well-formed character data or markup 解决办法:1.配置的动态SQL语句里 ...

  2. 【线程】linux之多线程同步互斥技术

      1.同步机制      线程同步机制主要有:互斥量/信号量/条件变量/读写锁等. 2.技术示例 创建2个计数线程A和B,每次计数加1,当为偶数时,A线程计数:当为奇数时,B线程计数.    源码: ...

  3. pre 标签的使用注意事项

    .news-msg{ // padding: 5px; white-space: pre-wrap; word-wrap: break-word; font-family:'微软雅黑'; } < ...

  4. 多媒体文件格式解析之MP3

    音频文件格式MP3 1. MP3是什么? MP3是MPEG-1 Audio Layer 3的缩写,是当今较流行的一种数字音频编码和有损压缩格式,它设计用来大幅度地降低音频数据量,而对于大多数用户的听觉 ...

  5. Windows下GUI编程——窗口

    windows下创建一个基于GUI的窗口程序很简单,使用MFC或者Win32 API都可以实现.本文简单整理下windows API创建GUI应用程序的基本编码框架. 比较常见的窗口包括:桌面窗口.应 ...

  6. 实现基于最近邻内插和双线性内插的图像缩放C++实现

    平时我们写图像处理的代码时,如果需要缩放图片,我们都是直接调用图像库的resize函数来完成图像的缩放.作为一个机器视觉或者图像处理算法的工作者,图像缩放代码的实现应该是必须掌握的.在众多图像缩放算法 ...

  7. iOS开发中多线程断点下载大文件

    主要思想,就是创建一个与目标文件等大小的空白文件,然后分段往这个空白文件中写入数据. 可以通过发送HEAD请求,获得服务器中文件的具体大小,然后再将这样的长度分割成若干等大的数据块,在发送get请求时 ...

  8. python - hadoop,mapreduce demo

    Hadoop,mapreduce 介绍 59888745@qq.com 大数据工程师是在Linux系统下搭建Hadoop生态系统(cloudera是最大的输出者类似于Linux的红帽), 把用户的交易 ...

  9. java基础篇---注解(Annotation)

    一.概念 Annontation是Java5开始引入的新特征.中文名称一般叫注解.它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metadata)与程序元素(类.方法.成员变量等)进行关 ...

  10. Docker之宿主机ssh至docker容器

    下载docker: https://www.docker.com/products/overview 下载镜像: docker pull centos 查看镜像:docker images 创建镜像对 ...