jquery name box loop help

thanks reading. i'm bit new jquery, am perplexing book i consolidate websites solve problem always drives me crazy...

the problem:
select boxes enlarged options cut off internet explorer. example, name boxes:

in firefox fine, nonetheless ie, options cut off extent name dump down.

the solution:
what i am looking do, emanate book i consolidate any page following:

1. loop by selects page.




2. for any select:
   a. loop by the options.
   b. extent longest option.
   c. bond duty enhance name extent concentration (or maybe click...).
   d. bond duty tremble it's uncanny extent blur.

i've managed many step #2 name box.

i found removing options extent problem (especially ie), i looped by copied calm any choice span, totalled camber width, used longest extent name stretched to. maybe somebody improved idea.

here code

<script type='text/javascript'>

      $(function() {

         /*
         duty will:
            1. emanate information store name called resizetowidth.
            2. stock extent longest option, approximated camber width.

         information store following used
         */
         // surrogate camber reason calm options.
         $('body').append("<span id='currentoptwidth'></span>");

         $("#theselect option").each(function(i){

            // initial through, 0 out resizetowidth (or finish adult nan).
            ( 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 calm tide choice span.
            $('#currentoptwidth').text( $(this).text() );

            // set resizetowidth longer a) tide opt width, b) itself. 
            //so reason extent longest choice done
            resizetowidth = math.max( $('#currentoptwidth').width() , $(this).parent().data('resizetowidth') );

            // transform progenitor resizetowidth data.
            $(this).parent().data('resizetowidth', resizetowidth)

          });

         // mislay surrogate 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>

and select:

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

hopefully run we wish run it, movement here: .

what i need assistance with:
this needs bit polish, nonetheless seems work ok mention name box.

however, i don't seem means figure out ask name boxes page loop. far, i have this:

$('select').each(
   function(i, select){
      // options name here... i select.each...?
   }
);

also, there improved proceed length longest choice any select? camber close, nonetheless unequivocally exact. problem ie advantage 0 choice widths tangible selects.

any ideas unequivocally welcome, both questions asked, any improvements code.

thanks!!