In this article I will explain with an example, how to adjust width of SELECT (DropDown) dynamically using JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an SELECT (DropDown) element with some options.
The SELECT (DropDown) is assigned with a JavaScript onmouseover function.
<select id="Select1" onmouseover="AdjustWidth(this)" style="width: 75px;">
    <option value="1">Mumbai</option>
    <option value="2">Delhi</option>
    <option value="3">Chandigarh City</option>
</select>
 
 
Adjusting width of SELECT (DropDown) using JavaScript
When mouse is hovered on SELECT (DropDown), the AdjustWidth JavaScript function is called.
Inside this JavaScript function, a loop will be executed over the options of SELECT (DropDown) element and the maximum Text length is determined.
Finally, the width is set to the SELECT (DropDown) element.
<script type="text/javascript">
    function AdjustWidth(ddl) {
        var maxWidth = 0;
        for (var i = 0; i < ddl.length; i++) {
            if (ddl.options[i].text.length > maxWidth) {
                maxWidth = ddl.options[i].text.length;
            }
        }
        ddl.style.width = maxWidth * 7 + "px";
    }
</script>
 
 
Screenshot
Adjust width of ASP.Net SELECT (DropDown) dynamically using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code