Javascript JQuery选择框和循环帮助

谢谢你的阅读。我对jQuery有点陌生，我正在尝试制作一个脚本，可以包含在我所有的网站中，以解决一个总是让我发疯的问题

问题是： 在Internet Explorer中，选择具有长选项的框将被切断。例如，这些选择框：

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

另外，是否有更好的方法来获取每个选择的最长选项的长度？跨度很近，但不是很精确。问题是IE对实际选择的选项宽度返回零

任何想法都是非常受欢迎的，无论是对于提出的问题，还是对我的代码的任何其他改进

---

谢谢

要修改每个选择，请尝试以下操作：

$('select').each(function(){

  $('option', this).each(function() {
    // your normalizing script here

  })

});

---

第二个jQuery调用上的第二个参数（this）作用于选择器（'option'），因此它本质上是“此select中的所有选项元素”。如果没有提供第二个参数，您可以将其默认设置为“document”。

我可以使用此代码在IE7中复制页面上所有选择的结果，我发现这比您使用的span方法简单得多，但您可以使用任何适合您需要的代码替换“resize”函数

function resize(selectId, size){
    var objSelect = document.getElementById(selectId);
    var maxlength = 0;
    if(objSelect){
        if(size){
            objSelect.style.width = size;
        } else {
            for (var i=0; i< objSelect.options.length; i++){
                if (objSelect[i].text.length > maxlength){
                    maxlength = objSelect[i].text.length;
                }
            }
            objSelect.style.width = maxlength * 9;
        }
    } 
}

$(document).ready(function(){
    $("select").focus(function(){
        resize($(this).attr("id"));
    });
    $("select").blur(function(){
        resize($(this).attr("id"), 40);
    });
});

函数调整大小（selectId，size）{
var objSelect=document.getElementById（selectId）；
var maxlength=0；
if（objSelect）{
如果（尺寸）{
objSelect.style.width=大小；
}否则{
对于（var i=0；imaxlength）{
maxlength=objSelect[i].text.length；
}
}
objSelect.style.width=maxlength*9；
}
} 
}
$（文档）.ready（函数（）{
$（“选择”）.focus（函数（）{
调整大小（$（this.attr（“id”））；
});
$（“选择”）.blur（函数（）{
调整大小（$（this）.attr（“id”），40）；
});
});

谢谢！需要澄清的是，我是否会将焦点绑定到select like选项。focus（function（）{…}）；？这是一个好主意，尽管它对固定宽度9像素宽字体的假设进行了硬编码。为了便于移植，您可能应该包括currentoptwidth div部分

$('select').each(function(){

  $('option', this).each(function() {
    // your normalizing script here

  })

});

function resize(selectId, size){
    var objSelect = document.getElementById(selectId);
    var maxlength = 0;
    if(objSelect){
        if(size){
            objSelect.style.width = size;
        } else {
            for (var i=0; i< objSelect.options.length; i++){
                if (objSelect[i].text.length > maxlength){
                    maxlength = objSelect[i].text.length;
                }
            }
            objSelect.style.width = maxlength * 9;
        }
    } 
}

$(document).ready(function(){
    $("select").focus(function(){
        resize($(this).attr("id"));
    });
    $("select").blur(function(){
        resize($(this).attr("id"), 40);
    });
});