Справка по окну выбора и циклу JQuery

Спасибо за чтение. Я немного новичок в jQuery и пытаюсь создать сценарий, который я могу включить на все свои веб-сайты, чтобы решить проблему, которая всегда сводит меня с ума ...

Эта проблема: Поля выбора с длинными параметрами в Internet Explorer обрезаются. Например, эти поля выбора: http://discoverfire.com/test/select.php

В Firefox они в порядке, но в IE параметры обрезаются по ширине выбора, когда они раскрываются.

Решение: Я хочу создать сценарий, который я могу включить на любую страницу, который будет выполнять следующие действия:

1. Просмотрите все выбранные на странице.

2. Для каждого выбора: A. Прокрутите его варианты. Б. Найдите ширину самого длинного варианта. 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 возвращает ноль для ширины опций фактического выбора.

Мы приветствуем любые идеи, как в отношении заданных вопросов, так и в отношении любых других улучшений моего кода.

Спасибо!!