Winning cut text in HTML select

How often do you have to deal with HTML SELECT in Internet Explorer? (you can not answer, this is a rhetorical question). The most probably known bug is the problem of SELECT and z-index. However, I want to share how I decided for myself another well-known problem: the text in options is clipped when the SELECT width is less than the OPTION name. The problem itself is visible in the screenshot:




Since I use jquery on my site, I will describe the solution to the problem on it. I want the SELECT to expand automatically when you hover and select OPTION in SELECT.
')

1. When you hover the mouse cursor, the SELECT expands to the width of the longest text in OPTIONS.
2. When selected, the loss of focus. SELECT returns its original size.

Initially, the fix was like this (I’ll say right away that I decided to implement fix as a plugin for jquery):

( function ($) {
$.fn.AutoWidth = function ( readonly ) {
return this .filter( 'select' )
.focus( function () { $( this ).width( "auto" ); })
.blur( function () { $( this ).width( "" ); });
}
})(jQuery);

* This source code was highlighted with Source Code Highlighter .

At all the SELECTs I had a style that set the width, so just add / remove style = "width: auto" worked as it should. But! I wanted the SELECT to expand when the mouse was moved and when OPTION was selected it was removed. Added a hover event and ran into a new problem, in IE, a mouseout of SELECT is triggered as soon as the user starts to select OPTION from the list. In general, I will not torment you and show the final version of fix'a:

( function ($) {
$.fn.AutoWidth = function ( readonly ) {
return this .filter( 'select' )
.mouseover( function () { $( this ).width( "auto" ).mouseout( function () { $( this ).width( "" ); }); })
.click( function () { $( this ).unbind( "mouseout" ); })
.blur( function () { $( this ).width( "" ); })
.change( function () { $( this ).width( "" ); });
}
})(jQuery);

* This source code was highlighted with Source Code Highlighter .