In this article I will explain with an example, how to adjust width of DropDownList dynamically using jQuery in ASP.Net.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net DropDownList with some ListItem.
<asp:DropDownList ID="DropDownList1" runat="server" Width="75px">
    <asp:ListItem Text="Mumbai" Value="1"></asp:ListItem>
    <asp:ListItem Text="Delhi" Value="2"></asp:ListItem>
    <asp:ListItem Text="Chandigarh City" Value="3"></asp:ListItem>
</asp:DropDownList>
 
 
Adjusting width of DropDownList using jQuery
Inside the jQuery document ready event handler, the DropDownList has been assigned with a mouseover event handler.
Inside this event handler, the AdjustWidth JavaScript function is called.
Inside the AdjustWidth JavaScript function, a loop will be executed over the items of DropDownList and the maximum Text length is determined.
Finally, the width is set to the DropDownList.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    $(function () {
        $("select").mouseover(function () {
            AdjustWidth(this);
        });
    });
    function AdjustWidth(ddl) {
        var maxWidth = 0;
        $(ddl).find('option').each(function (i) {
            if ($(this).text().length > maxWidth) {
                maxWidth = $(this).text().length;
            }
        });
        $(ddl).css("width", maxWidth * 7 + "px");
    }
</script>
 
 
Screenshot
Adjust width of ASP.Net DropDownList dynamically using jQuery
 
 
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
 
 
Downloads