不少时候在页面中为了布局的需要，下拉列表<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. [DIOCP3-IocpTask说明书]基于IOCP引擎的多线程任务的投递和回调处理单元

    [说明] IocpTask是基于Iocp引擎的多线程任务投递和处理单元,可以方便的把任务进行投递到IOCP线程进行统一调度和处理,是模仿QDAC-QWorker的处理方式,支持D7以上的版本. [使用 ...

  2. [开源项目-MyBean轻量级配置框架] MyBean的特性和MyBean的开始

    [概述] 自从mBean框架出生后,受到很多朋友的关注,在公司的外包项目中得到了不错的应用.由于mBean是公司的项目,不便开源,于是这几天利用晚上的时间和周末的时间重写了底层beanMananger ...

  3. spark读取hdfs数据本地性异常【转】

    在分布式计算中,为了提高计算速度,数据本地性是其中重要的一环. 不过有时候它同样也会带来一些问题. 一.问题描述 在分布式计算中,大多数情况下要做到移动计算而非移动数据,所以数据本地性尤其重要,因此我 ...

  4. NSLOOKUP命令的使用方法

    查询IP地址 nslookup最简单的用法是查询域名对应的IP地址,包括A记录.MX记录.NS记录CNAME记录. 查询A记录:nslookup 域名 查询MX记录:nslookup -q=mx 域名 ...

  5. ipconfig 命令有什么作用

    ipconfig /all:显示本机TCP/IP配置的详细信息:ipconfig /release:DHCP客户端手工释放IP地址:ipconfig /renew:DHCP客户端手工向服务器刷新请求: ...

  6. keepalived+nginx双机热备+负载均衡

    Reference: http://blog.csdn.net/e421083458/article/details/30092795 keepalived+nginx双机热备+负载均衡 最近因业务扩 ...

  7. Scapy:局域网MAC地址扫描脚本

    转载自:http://blog.sina.com.cn/s/blog_4b5039210100gn6k.html 未测试,回头研究研究. 用python+scapy写的,只要双击.py文件即可,扫描当 ...

  8. BAT-删除文件夹

     相关资料:https://www.cnblogs.com/EasonJim/p/6087636.html 可以删除空的文件夹,但是文件夹中有文件,无法删除. @echo off rd "C ...

  9. Web基础 HTML CSS JS JQuery AJAX

    1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...

  10. [Linux实用工具]munin-node插件配置和插件编写

    前面介绍了2篇munin使用的相关文章: [Linux实用工具]Linux监控工具munin的安装和配置 [Linux实用工具]Linux监控工具munin的展示(Nginx)   这次介绍一下mun ...