Question

我编写了一个带<select> ID的函数，并用新的选项替换所有选项（使用jQuery的html()）。但是，在IE上，下拉列表的宽度仍然是原始的，其大小比我需要显示的大，因为它基于具有长字符串标题的原始<option>。

有没有办法迫使<select>重新计算它的宽度？

我正在使用IE 8。

Answer 1

我认为实用的解决方案是替换整个<select>元素。这样，新插入的元素将具有其<option>元素的正确宽度（忽略可能应用的任何其他样式）。

如果替换整个select，要记住的是，在从DOM中删除它之前需要清理对被替换元素的任何引用（以避免任何潜在的内存泄漏）和附加到新插入的事件处理程序元件。

Answer 2

可以通过css设置其宽度。在你的情况下，我会使用这种方法来接近它：

如果您使用em或ex作为字体大小单位，那么因为它是基于高度的值，您可以假设使用某个比率，它几乎接近字符宽度的等效值。基于此，您可以实际计算出选择元素的宽度：

1st：从选择选项中获取最小字符串的字符数。第二：乘以em值。第3步：将此值设置为选择的宽度。

使用可通过以下方式实现的jquery：

var em = 1em; //assign here a value, that corresponds to your layout's font size
var shortest = 6500;
$('mySelect').each(function(i, selected){
   temp = $(selected).text().length();
   shortest = (temp < shortest) ? temp : shortest;
});
$('mySelect').css('width',(shortest*em + 1) + 'em'); //add 1em for the scrollbar

IE <select>，如何使显示的宽度尽可能小的当前选项</select>

2 个答案: