In this article I will explain with an example, how to convert DropDownList to ComboBox using jQuery in ASP.Net.
jQuery Plugin for Searchable DropDownList
This article makes use of Select2 jQuery Plugin for converting DropDownList to ComboBox using jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of an ASP.Net DropDownList and a Button. The Button has been assigned with an OnClick event handler.
<asp:DropDownList ID="ddlCustomers" runat="server">
<asp:ListItem Text="--Select Customer--" Value="0" />
<asp:ListItem Text="John Hammond" Value="1" />
<asp:ListItem Text="Mudassar Khan" Value="2" />
<asp:ListItem Text="Suzanne Mathews" Value="3" />
<asp:ListItem Text="Robert Schidner" Value="4" />
</asp:DropDownList>
<br />
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
Select2 jQuery Plugin implementation
First, the jQuery and the JS and CSS files of the jQuery Select2 plugin are inherited.
Then inside the jQuery document ready event handler, the jQuery Select2 plugin is applied to the ASP.Net DropDownList.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=ddlCustomers]").select2();
});
</script>
Fetching the value of DropDownList on Server Side
When the Submit Button is clicked, the Text and the Value part of the selected DropDownList item are displayed using JavaScript Alert message box.
C#
protected void Submit(object sender, EventArgs e)
{
string message = "Name: " + ddlCustomers.SelectedItem.Text;
message += "\\nID: " + ddlCustomers.SelectedItem.Value;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "')", true);
}
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs)
Dim message As String = "Name: " + ddlCustomers.SelectedItem.Text
message &= "\nID: " + ddlCustomers.SelectedItem.Value
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "')", True)
End Sub
Screenshot
![Convert DropDownList to ComboBox using jQuery in ASP.Net]()
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
