谢谢阅读。我对 jQuery 有点陌生，我正在尝试制作一个可以包含在我所有网站中的脚本来解决一个总是让我发疯的问题......
问题：
带有长选项的选择框在 Internet Explorer 中会被截断。例如，这些选择框：http://discoverfire.com/test/select.php http://discoverfire.com/test/select.php
在 Firefox 中，它们很好，但在 IE 中，选项在下拉时会被截断为选择的宽度。
解决方案：
我想要做的是创建一个脚本，我可以将其包含在将执行以下操作的任何页面中：
循环浏览页面上的所有选择。
对于每个选择：
A. 循环遍历其选项。
B. 找出最长选项的宽度。
C. 绑定一个函数以将选择范围扩展到焦点上的宽度（或者单击...）。
D. 绑定一个函数以在模糊时缩小到其原始宽度。
我已经成功地为一个选择框完成了第 2 步的大部分操作。
我发现获取选项宽度是一个问题（尤其是在 IE 中），因此我循环遍历并将每个选项的文本复制到一个跨度，测量跨度宽度，并使用最长的一个作为选择将扩展到的宽度。也许有人有更好的主意。
这是代码
<script type='text/javascript'>
$(function() {
/*
This function will:
1. Create a data store for the select called ResizeToWidth.
2. Populate it with the width of the longest option, as approximated by span width.
The data store can then be used
*/
// Make a temporary span to hold the text of the options.
$('body').append("<span id='CurrentOptWidth'></span>");
$("#TheSelect option").each(function(i){
// If this is the first time through, zero out ResizeToWidth (or it will end up NaN).
if ( isNaN( $(this).parent().data('ResizeToWidth') ) ) {
$(this).parent().data( 'OriginalWidth', $(this).parent().width() );
$(this).parent().data('ResizeToWidth', 0);
$('CurrentOptWidth').css('font-family', $(this).css('font-family') );
$('CurrentOptWidth').css('font-size', $(this).css('font-size') );
$('CurrentOptWidth').css('font-weight', $(this).css('font-weight') );
}
// Put the text of the current option into the span.
$('#CurrentOptWidth').text( $(this).text() );
// Set ResizeToWidth to the longer of a) the current opt width, or b) itself.
//So it will hold the width of the longest option when we are done
ResizeToWidth = Math.max( $('#CurrentOptWidth').width() , $(this).parent().data('ResizeToWidth') );
// Update parent ResizeToWidth data.
$(this).parent().data('ResizeToWidth', ResizeToWidth)
});
// Remove the temporary span.
$('#CurrentOptWidth').remove();
$('#TheSelect').focus(function(){
$(this).width( $(this).data('ResizeToWidth') );
});
$('#TheSelect').blur(function(){
$(this).width( $(this).data('OriginalWidth') );
});
alert( $('#TheSelect').data('OriginalWidth') );
alert( $('#TheSelect').data('ResizeToWidth') );
});
</script>
并选择：
<select id='TheSelect' style='width:50px;'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
<option value='5'>Five</option>
<option value='6'>Six</option>
<option value='7'>Seven...</option>
</select>
如果您想运行它，希望它能为您运行，或者您可以在此处查看它的运行情况：http://discoverfire.com/test/select.php http://discoverfire.com/test/select.php.
我需要什么帮助：
这需要一些改进，但如果您指定选择框，似乎可以正常工作。
但是，我似乎无法弄清楚如何将其应用到带有循环的页面上的所有选择框。到目前为止，我有这个：
$('select').each(
function(i, select){
// Get the options for the select here... can I use select.each...?
}
);
另外，是否有更好的方法来获取每个选择的最长选项的长度？跨度很接近，但不是很精确。问题是 IE 对于实际选择的选项宽度返回零。
任何想法都非常受欢迎，无论是对于提出的问题还是对我的代码的任何其他改进。
Thanks!!
