JQuery Select Box and Loop Help

Thanks for reading. I'm a bit new to jQuery, and am trying to make a script I can include in all my websites to solve a problem that always drives me crazy...

The problem: Select boxes with long options get cut off in Internet Explorer. For example, these select boxes: http://discoverfire.com/test/select.php

In Firefox they are fine, but in IE, the options are cut off to the width of the select when they drop down.

The solution: What I am looking to do, is create a script that I can include in any page that will do the following:

1. Loop through all the selects on the page.

2. For each select: A. Loop through its options. B. Find the width of the longest option. C. Bind a function to expand the select to that width on focus (or maybe click...). D. Bind a function to shrink to it's original width on blur.

I've managed to do most of step #2 for one select box.

I found that getting the options width was a problem (especially in IE), so I looped through and copied the text of each option to a span, measured the span width, and used the longest one as the width the select will be expanded to. Perhaps somebody has a better idea.

Here is the code

<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('R