JQuery选择框和循环帮助

谢谢阅读.我对jQuery有点新鲜,我正在尝试创建一个脚本,我可以在我的所有网站中包含这个脚本来解决一个让我疯狂的问题......

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

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

解决方案:我要做的是创建一个脚本,我可以将其包含在将执行以下操作的任何页面中:

遍历页面上的所有选择.

对于每个选择:A.循环选择.B.找到最长选项的宽度.C.绑定一个函数,将select扩展到焦点上的宽度(或者点击......).D.绑定一个函数以缩小到模糊时的原始宽度.

我已经成功完成了一个选择框的第2步的大部分工作.

我发现获取选项宽度是一个问题(特别是在IE中),所以我循环并将每个选项的文本复制到跨度,测量跨度宽度,并使用最长的选项作为选择将扩展到的宽度.也许有人有更好的主意.

这是代码

和选择:

   One
   Two
   Three
   Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... 
   Five
   Six
   Seven...

希望如果你想运行它,它会为你运行,或者你可以在这里看到它:http://discoverfire.com/test/select.php.

我需要帮助:这需要一点点润色,但如果指定选择框似乎可以正常工作.

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

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

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

对于提出的问题以及对我的代码的任何其他改进,非常欢迎任何想法.

谢谢!!

要修改每个选择,请尝试以下操作:

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

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

  })

});

第二个jQuery调用的第二个参数(this)作用于选择器('option'),因此它基本上是'this select中的所有选项元素'.您可以将第二个参数默认为"文档"(如果未提供).

我能够使用此代码复制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);
    });
});