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>
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=""></script>
<script type = "text/javascript">
    $(function () {
        $("select").mouseover(function () {
    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");
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.