Побеждаем обрезанный текст в HTML select

Как часто вам приходится сражаться с HTML SELECT в Internet Explorer'е? (можете не отвечать, это риторический вопрос). Самый, наверное, известный баг это проблема SELECT и z-index. Однако, я хочу поделиться, как я решил для себя другую известную проблему: обрезается текст в options, когда ширина SELECT меньше, чем название OPTION. Сама проблема собственно видна на скриншоте:




Так как у себя на сайте я использую jquery, то и решение проблемы буду описывать на нем. Я хочу, чтобы SELECT расширялся автоматически при наведении и выборе OPTION в SELECT.

1. При наведении курсора мыши, SELECT расширяется по ширине самого длинного текста в OPTIONS.
2. При выборе, потере фокуса SELECT возвращает свой первоночальный размер

Изначально fix был такой (сразу скажу, что я решил реализовать fix в виде плагина для 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.

На всех SELECT у меня стоял стиль, который задавал ширину, так что просто добавит \ убрать style=«width:auto» работало как надо. Но! Я хотел чтобы при наведении мышки SELECT расширялся и при выборе OPTION убирался. Добавил событие hover и столкнулся с новой проблемой, в IE срабатывает mouseout у SELECT, как только пользователь начинает выбирать OPTION из списка. Вообщем не буду вас томить и показываю конечный вариант 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.