Question

Select only showing first character of option text in IE 9

Using click on div event adding option, only the first character is shown.

The problem occurs in IE 9. FF and Chrome is doing it ok.

Works in JQuery 1.3.2 but not above.

Please see this jsfiddle: http://jsfiddle.net/q5F2r/25/

Or

HTML

<button type="button" id="btn">insert option</button><div id="container"></div>

Javascript

$(document).ready(function () {
    $("#container").append("<select class='category-select root' style='width:100px' />");  
    $("#btn").click(function(){    
       $(".root").append("<option>none</option>");
    });
});

Answer 1

I found an answer. Apparently it has been discussed before on stackoverflow. It’s weird that Microsoft can’t fix this kind of bug, before they release IE10!!

Well. The solution is a real hack. You can force IE to redraw the <select>, by setting the width of the select to something. In this example it is set to its own value. Wonder why every web developer out there hates IE?

http://jsfiddle.net/q5F2r/32/