不少时候在页面中为了布局的需要，下拉列表<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. 使用HttpClient配置代理服务器模拟浏览器发送请求调用接口测试

    在调用公司的某个接口时,直接通过浏览器配置代理服务器可以请求到如下数据: 请求url地址:http://wwwnei.xuebusi.com/rd-interface/getsales.jsp?cid ...

  2. js 去掉html标签

    方法一: /// <summary> /// 去除HTML标记 /// </summary> /// <param name="NoHTML"> ...

  3. 这到底是什么bug？---已结贴

    问题描述:全局变量,会被莫名其妙更改!打印为50,后面做比较的时候这个值为0了. 第一,我肯定没有犯低级错误,没有其他的更改,搜索全部代码,没有发现这个变量因为我程序问题导致不符合预期,同时找了两位同 ...

  4. iOS开发：代码通用性以及其规范 第二篇（猜想iOS中实现TableView内部设计思路（附代码），以类似的思想实现一个通用的进度条）

    在iOS开发中,经常是要用到UITableView的,我曾经思考过这样一个问题,为什么任何种类的model放到TableView和所需的cell里面,都可以正常显示?而我自己写的很多view却只是能放 ...

  5. WPF学习笔记（2）——动画效果按钮变长

    说明(2017-6-12 11:26:48): 1. 视频教程里是把一个按钮点击一下,慢慢变长: 注意几个方面: (1)RoutedEvent="Button.Click",这里面 ...

  6. 2. 集成学习（Ensemble Learning）Bagging

    1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...

  7. browser_autopwn2

    browser_autopwn2是个啥玩意儿? 一个集合了浏览器漏洞的小框架 option msf > use auxiliary/server/browser_autopwn2 msf aux ...

  8. pycharm 操作的一些设置，记录下

    机器学习中大量的用到了Python,因此需要有pycharm作为Python的编译工具,配合anconda环境进行配置,将macos,tensorflow ,python的配置记录下: We sugg ...

  9. CAS (10) —— JBoss EAP 6.4下部署CAS时出现错误exception.message=Error decoding flow execution的解决办法

    CAS (10) -- JBoss EAP 6.4下部署CAS时出现错误exception.message=Error decoding flow execution的解决办法 jboss版本: jb ...

  10. backbone的对象继承实现

    通过原型链实现对象的继承,子类通过’__super__‘来访问父类的方法 // protoProps 子类的属性参数 // staticProps 静态属性 var extend = function ...