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>
</asp:DropDownList>
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
