JQuery选择框和循环帮助

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

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

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

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

1. 遍历页面上的所有选择。

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

我已经设法为一个选择框执行步骤＃2的大部分操作。

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

这是代码

 $(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(""); $("#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') ); });  

和选择：

  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为实际选择的选项宽度返回零。

任何想法都非常受欢迎，既可以提出问题，也可以对我的代码进行任何其他改进。

谢谢！！

Answer 1

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

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

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

Answer 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); }); });