Javascript Fix Up For Internet Explorer Select Options Truncation

OK, that is a long title, but the issue has real world implications. Since there are still requirements that require support for Internet Explorer 8, it would behoove me to have an elegant pattern that fixes the limitations of IE8 and enhances the user experience.

My initial pass is adapted from http://css-tricks.com/select-cuts-off-options-in-ie-fix/. I found it some what long winded and only solved part of the problem.

?

Initial Pass Source:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

function dropDownListFixup(sender, args) {     var el,         ua = $.browser,         up = (sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null,         selects = $("select", up);     if (ua.msie && Number(ua.version) < 9) {         selects             .each(function () {                 el = $(this);                 el.data("oWidth", el.outerWidth());             })             .mouseenter(function () {                 $(this).css("width", "auto");             })             .bind("blur change", function () {                 el = $(this);                 el.css("width", el.data("oWidth"));             });     }     selects.each(function (e) {         this.title = $(":selected", $(this)).text();     }); }   $(function () {     var prm = Sys.WebForms.PageRequestManager.getInstance();     prm.add_endRequest(dropDownListFixup);     dropDownListFixup();     $("body").delegate("select", "change", function (e) {         this.title = $(":selected", $(this)).text();     }); });

After some refactoring and extending, I came up with a solution that is slightly more compact, but provides slightly more functionality and handles drop down lists in update panels. Since even if the drop downs are in modern browsers, the text may be truncated on the closed display if the width is set too small. To fix this issue, I set the title on the drop down so that if the user hovers over the control, the tool tip will display with the value.

?

Source:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

// Adapted from: http://css-tricks.com/select-cuts-off-options-in-ie-fix/ function dropDownListSetTitles(sender, args, e) {     var selects = $("select", ((sender) ? "#" + sender._updatePanelClientIDs.join(",#") : null));     selects.each(function (e) {         var el = $(this);         el.data("oWidth", el.outerWidth());         setDropDownListTitle.apply(this, [e]);     }); } function setDropDownListTitle(e) {     this.title = $(":selected", $(this)).text(); } $(function () { // dropDownListFixup     dropDownListSetTitles();     if ($.browser.msie && Number($.browser.version) < 9) { //// mouseenter  mouseleave         $("body").delegate("select", "focus", function () {             $(this).css("width", "auto");         })         .delegate("select", "blur change", function () {             var el = $(this);             el.css("width", el.data("oWidth"));         });     }     $("body").delegate("select", "change", setDropDownListTitle);     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dropDownListSetTitles); });