问题：
选择具有长选项的框在Internet Explorer中被切断.例如,这些选择框：
http://discoverfire.com/test/select.php

在Firefox中,它们很好,但是在IE中,当它们下拉时,选项将被切断到选择的宽度.

解决方案：
我想要做的是创建一个脚本,我可以在任何可以包含以下内容的页面中添加：

>循环浏览页面上的所有选择.
>对于每个选择：
循环选择.
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.

我需要什么帮助：
这需要一点抛光,但如果您指定选择框,似乎可以正常工作.

但是,我似乎无法弄清楚如何将它应用到带有循环的页面上的所有选择框中.到目前为止,我有这个：

$('select').each(
   function(i,select){
      // Get the options for the select here... can I use select.each...?
   }
);

另外,有没有更好的方法来获得每个选择的最长选项的长度？跨度接近,但不是非常精确.问题是IE为实际选择的选项宽度返回零.

任何想法都是非常受欢迎的,无论是问题,还有任何其他改进我的代码.

谢谢！！