javascript - 用于条目列表和所选条目的具有不同大小的 Html 下拉列表

Question

我在使用 html 下拉菜单时遇到了一些问题。我想保持下拉列表的大小固定，但是当用户点击下拉列表时，列表应该以更大的尺寸显示，这样条目就不会被 chop 。这是 fiefox 的默认行为，这个问题只出现在IE。任何人都可以建议一些解决方法来解决 IE 中的这个问题吗？

我尝试在 onclick 事件中扩大下拉列表的大小。但它会增加整个下拉菜单。(不仅是列表)。

style='width:100px;' onclick="this.style.width = '200px';" onblur ="this.style.width = '100px'

Answer 1

出于纯粹的好奇心，我试图解决一些问题。这并不完美。

使用 em 而不是 px，em 存在问题，但在这种情况下它比 px 可靠得多。 How Big is an Em?

HTML:

<select id="sel" name="sel" style="width:100px;">
    <option>Options</option>
    <option>IIIIIIIIIIIIIII</option>
    <option>MMMMMMMMMMMMMMMMMMMMMMMMM</option>
    <option>OptionsOptionsOptionsOptionsOptionsOptions</option>
    <option>Options</option>
</select>

JQuery:

$('#sel').change(function () {
   var len = $('#sel option:selected').val().length;
   $('#sel').attr("style", "width:"+len+"em;");
});

The quick JsFiddle

你会发现它并不完美，I 比 M 小得多，但 px 更依赖于字体。至少他们有一定的一致性。可能有帮助!