选择框不会调整大小

Question

I have an issue where I have a dropdown box that is as wide as the words "choose please" but when I append to the box it adds the new options to the dropdown but is stays the same width even though the new option are much wider. How do I force it to update the width.

 var sOption = '
<option value="volvo">Volvoooooooooooooooooooooooooooooooooooo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>';

$("mySelect").append(sOption); // how do I force the width to update

Answer 1

This sounds like you have some css forcing the width thinner I would start with

.mySelect{width:auto;}

and go from there

Answer 2

This issue is CSS-relative. By default, it works well: http://jsfiddle.net/featalion/A6qbd/ . So, try to update your width style to automatic resize the select: http://jsfiddle.net/featalion/f5QWH/1/ .

$('#my_select').css('width', 'auto');