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:
DropDownList – For displaying data.
The DropDownList consists of three ListItems.
<asp:DropDownList ID="ddlCities" 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 HTML Markup, the following jQuery JS file is inherited.
1. jquery.min.js
Inside the jQuery document ready event handler, the DropDownList has been assigned with a mouseover event handler inside which 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.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.