9

読んでくれてありがとう。私はjQueryに少し慣れていないので、常に頭がおかしくなる問題を解決するために、すべてのWebサイトに含めることができるスクリプトを作成しようとしています...

問題：長いオプションのある選択ボックスがInternetExplorerで途切れる。たとえば、次の選択ボックス： http ://discoverfire.com/test/select.php

Firefoxでは問題ありませんが、IEでは、オプションはドロップダウン時に選択範囲の幅に切り取られます。

解決策：私が探しているのは、次のことを実行する任意のページに含めることができるスクリプトを作成することです。

  1. ページ上のすべての選択をループします。

  2. 選択ごとに：A。オプションをループします。B.最長のオプションの幅を見つけます。C.関数をバインドして、フォーカスで選択範囲をその幅に拡張します（またはクリックして...）。D.関数をバインドして、ぼかし時に元の幅に縮小します。

ステップ2のほとんどを1つの選択ボックスで実行できました。

オプションの幅を取得するのが問題であることがわかったので（特に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が実際の選択のオプション幅に対してゼロを返すことです。

尋ねられた質問と私のコードに対する他の改善の両方について、どんなアイデアも大歓迎です。

ありがとう！！

4

2 に答える 2

11

各選択を変更するには、これを試してください：

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

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

  })

});

2 番目の jQuery 呼び出しの 2 番目のパラメーター (this) は、セレクター ('option') の範囲を指定するため、基本的には 'この選択内のすべてのオプション要素' です。2 番目のパラメーターが指定されていない場合、デフォルトで 'document' になると考えることができます。

于 2008-10-13T20:22:11.510 に答える
5

このコードを使用して、IE7 のページ上のすべての選択の結果を複製することができました。これは、使用しているスパン メソッドよりもはるかに簡単ですが、「サイズ変更」関数をニーズに合ったコードに置き換えることができます。

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);
    });
});
于 2008-10-13T20:38:58.653 に答える