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

当使用固定宽度的选择标签时，IE中有一个错误。当选择标签中选项的内容大于选择标签的宽度时，它会隐藏。它在fire fox中工作正常，而在IE中工作正常

---

这是IE中的一个缺陷，除了使选择框变宽之外，没有办法解决它：

<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>

这是一个很长的选项，但很酷，因为选择也很长

---

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

我从未尝试过这一点，但您可以尝试设置输入字段

position: absolute

和例如

width: 500

---

onFocus，并将其设置回正常onBlur。你可能需要稍微修改一下布局，这样它就不会抖动，但我想不出为什么这样做不起作用。

我提出的解决方案（我在谷歌上找不到）非常简单：当用户单击选择列表时，将类换成一个没有宽度限制的类。当他们做出选择时，将类交换回具有宽度限制的类

下面是一个使用jquery的示例

$(function() {

$(".SecuritySelect")

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

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

});

---

Hedgerow对此问题有一个极好的解决方案：

---

它的DHTML菜单非常流畅，但非常干净。固体修复。

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

$('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'); });

---

github上有一个作为jQuery插件的项目：

只需将其用作：

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

---

添加评论，这样我就不会忘记再次来到这里。据我所知，这方面没有解决办法，但也许有人知道些什么。刚发现“收藏”按钮。：）你应该做一些固定定位之类的事情，因为这会使页面回流。同意，这是一个小问题，你可以将它放在一个带有溢出的div中：hidden，一个l，答案之一，这会引导你。这不是一个bug，而是一个特性。