JQuery 选择框和循环帮助

Posted 2023-05-07

【中文标题】JQuery 选择框和循环帮助

【英文标题】：JQuery Select Box and Loop Help

【发布时间】：2010-09-16 22:53:45

【问题描述】：

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

问题： 带有长选项的选择框在 Internet Explorer 中被截断。例如，这些选择框： 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。

我需要帮助： 这需要一点润色，但如果您指定选择框，似乎可以正常工作。

但是，我似乎无法弄清楚如何通过循环将其应用于页面上的所有选择框。到目前为止，我有这个：

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

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

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

谢谢！！

【参考方案1】：

要修改每个选择，试试这个：

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

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

  )

);

第二个 jQuery 调用的第二个参数 (this) 作用于选择器 ('option')，因此它本质上是“此选择中的所有选项元素”。如果没有提供第二个参数，您可以认为它默认为“文档”。

【讨论】：

谢谢！澄清一下 - 我会将焦点绑定到像 option.focus(function().....); 这样的选择吗？

【参考方案2】：

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

【讨论】：

这是个好主意，尽管它硬编码了固定宽度 9 像素宽字体的假设。您可能应该包含 currentoptwidth div 部分以实现可移植性