JQuery选择框和循环帮助 [英] JQuery Select Box and Loop Help

问题描述

感谢阅读。我对jQuery有点新鲜，并且我正在尝试制作一个脚本，我可以在我的所有网站中包含以解决一个让我疯狂的问题......

Thanks for reading. I'm a bit new to jQuery, and am trying to make a script I can include in all my websites to solve a problem that always drives me crazy...

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

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

In Firefox they are fine, but in IE, the options are cut off to the width of the select when they drop down.

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

The solution: What I am looking to do, is create a script that I can include in any page that will do the following:

1. 循环浏览页面上的所有选项。

1. Loop through all the selects on the page.

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

For each select: A. Loop through its options. B. Find the width of the longest option. C. Bind a function to expand the select to that width on focus (or maybe click...). D. Bind a function to shrink to it's original width on blur.

我已成功为一个选择框执行大部分步骤＃2。

I've managed to do most of step #2 for one select box.

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

I found that getting the options width was a problem (especially in IE), so I looped through and copied the text of each option to a span, measured the span width, and used the longest one as the width the select will be expanded to. Perhaps somebody has a better idea.

这是代码

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

Hopefully this will run for you if you want to run it, or you can see it in action here: http://discoverfire.com/test/select.php.

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

What I need help with: This needs a bit of polish, but seems to work ok if you specify the select box.

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

However, I don't seem to be able to figure out how to apply it to all select boxes on the page with a loop. So far, I have this:

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

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

Also, is there a better way to get the length of the longest option for each select? The span is close, but not very exact. The problem is that IE returns zero for the option widths of the actual selects.

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

Any ideas are very welcome, both for the questions asked, and any other improvements to my code.

谢谢!!

推荐答案

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

To modify each select, try this:

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

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

  })

});

第二个jQuery调用的第二个参数（this）作用于选择器（'option'），所以它本质上是此选择中的所有选项元素。如果没有提供，你可以想到第二个参数默认为'document'。

The second parameter (this) on the second jQuery call scopes the selecter ('option'), so it is essentially 'all option elements within this select'. You can think of that second parameter defaulting to 'document' if it's not supplied.

这篇关于JQuery选择框和循环帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！