Html dropdown with different size for list of records and selected record

Question

I ran into some problem when dropping html. I want to keep the size of the drop-down list fixed, but when the user clicks on the drop-down list, the list should be displayed in a larger size so that the records are not truncated. This is the default behavior in fiefox, this problem only appears in IE. Can anyone suggest some work to solve this problem in IE?

I tried to expand the size of the dropdown in the onclick event. But this will enlarge the whole picture (not just the list).

style = 'width: 100px;' onclick = "this.style.width = '200px';" onblur = "this.style.width = '100px'

Answer 1

Out of sheer curiosity, I tried to do something. This is not perfect.

Using em instead of px, problems arise with em, but in this case it is much more reliable than px. How big is Em?

HTML:

<select id="sel" name="sel" style="width:100px;">
    <option>Options</option>
    <option>IIIIIIIIIIIIIII</option>
    <option>MMMMMMMMMMMMMMMMMMMMMMMMM</option>
    <option>OptionsOptionsOptionsOptionsOptionsOptions</option>
    <option>Options</option>
</select>

JQuery

$('#sel').change(function () {
   var len = $('#sel option:selected').val().length;
   $('#sel').attr("style", "width:"+len+"em;");
});

Fast JsFiddle

As you will see that it is not perfect, I am much smaller than M, but px are even more dependent on the font. At least they have some consistency. Maybe this will help!