如何在选择列表中显示扩展选项？答案

【问题标题】：How to show extended option in select list?如何在选择列表中显示扩展选项？
【发布时间】：2010-12-14 14:55:24
【问题描述】：

在使用固定宽度的选择标签时，IE 中存在一个错误。当SELECT标记中选项的内容大于选择标签的宽度时，其隐藏。它在火狐中运行良好，而不是在 IE 中。

alt text http://img691.imageshack.us/img691/4530/dropdown.gif

【问题讨论】：

添加评论，这样我就不会忘记再来这里了。据我所知，没有解决方法 - 但也许有人知道一些事情。
啊。刚刚发现了“收藏”按钮。 :)

标签： javascript html css

【解决方案1】：

在 github 上有一个作为 jQuery 插件的项目： http://css-tricks.com/select-cuts-off-options-in-ie-fix/

只需将其用作：


$(document).ready(function () {
    //all select lists expand to full width when selected
    $("select").ieExpandSelectWidth();
});

【讨论】：

【解决方案2】：

列出的解决方案很差。我发现并使用的一个是

$('select#CourtId')
    .focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); })
    .blur(function() { $('select#CourtId').removeAttr('style'); });

【讨论】：

【解决方案3】：

Hedgerwow 对这个问题有一个很好的解决方案：

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php

它包含在一个非常漂亮的 DHTML 菜单中，但做得非常干净。可靠的修复。

【讨论】：

【解决方案4】：

我想出的解决方案（我在所有的谷歌搜索中都没有找到）非常简单：当用户单击选择列表时，将类换成一个没有宽度限制的类。当他们做出选择时，将班级换回有宽度限制的班级。

这里有一个使用 jquery 的示例。

$(function() {

$(".SecuritySelect")

    .mouseover(function(){
        $(this)
            .data("origWidth", $(this).css("width"))
            .css("width", "auto");
    })

    .mouseout(function(){
        $(this).css("width", $(this).data("origWidth"));
    });

});

【讨论】：

你应该适当地做一些固定位置的事情，因为这会重新排列页面。
同意，这有点骇人听闻
你可以把它放在一个带有溢出的div中：隐藏，这是stackoverflow.com/questions/586718/…的答案之一，它会引导你到dougboude.com/blog/1/2008/05/…。

【解决方案5】：

这个我没试过，但是你可以试试设置输入框

position: absolute

例如

width: 500

onFocus，并将其设置回正常的onBlur。您可能需要稍微修改布局以使其不会抖动，但我想不出为什么这不起作用。

【讨论】：

【解决方案6】：

这是IE的一个bug，没有办法解决，只能让选择框变宽：

<select style="width: 500px;">
  <option value="1">
    This is a very long option, but it's cool, cause the select is also very long
  </option>
</select>

另一种选择是使用框架，将选择框替换为其他元素的样式组合。它们的行为类似于选择框，但需要 javascript 才能工作。

【讨论】：

这不是一个错误，它是一个特性。