Edit Question - KnowledgeHub

Title Body

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: Loop through all the selects on the page. 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

Tags (comma-separated) Cancel