JQuery選擇框和循環幫助

Question

感謝您的閱讀。我是一個有點新的jQuery和我試圖讓一個腳本，我可以包括我所有的網站，以解決一直讓我發瘋的一個問題...

問題： 長選項中選擇框被切在Internet Explorer中關閉。例如，這些選擇框： http://discoverfire.com/test/select.php

在Firefox中，它們很好，但在IE中，選項在下拉時會被截斷到選定寬度。

解決辦法： 我所希望做的，是創建一個腳本，我可以包括在任何網頁，將執行以下操作：通過網頁上的所有選擇

1. 循環。

2. 對於每個選擇： 答：循環選項。 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對實際選擇的選項寬度返回零。

任何想法都非常值得歡迎，無論是對於提出的問題，還是對我的代碼的任何其他改進。

謝謝！

Answer 1

修改每個選擇，試試這個：

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

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

    }) 

}); 

第二jQuery的調用的第二個參數（這）範圍的selecter（「選項」），所以它本質上是「在這個選擇的所有選項元素」。如果沒有提供，那麼您可以將第二個參數默認爲「文檔」。

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