When considering options for allowing multiple selections, using a list box is one possibility that offers versatility but requires more screen space.
In asp.net, there is no native support for a multiple select combo box (DropDownList).
To overcome this limitation, integrating a third-party library is a common solution. One popular choice is the jQuery extension known as select2.
It's worth noting that select2 does not integrate seamlessly with the DropDownList in asp.net, but it functions well with an HTML "select" element.
Interestingly, the DropDownList in asp.net is based on the HTML select element. By adding the runat="server" attribute to the select element, you essentially replicate the functionality of the Drop-down list, with the exception of autopostback="true". Whether this feature is necessary depends on your requirements.
Let's demonstrate how to create an example where auto-post backs are needed for the combo box.
To achieve this, we implement a JavaScript onchange event on the client side, triggering a button click on the form. This button can eventually be hidden using style="display:none".
The markup for our example looks like this:
<div style="float: left">
<h4>Select Multiple Cities</h4>
<select id="DropDownList1" runat="server" clientidmode="static"
datatextfield="City"
multiple="true"
style="width: 500px"
onchange="mychange()">
</select>
<script>
function mychange() {
$('#Button1').click()
}
</script>
</div>
<div style="float: left; margin-left: 35px; margin-top: 40px">
<asp:Button ID="Button1" runat="server" Text="Show Hotels"
ClientIDMode="Static"
CssClass="btn"
OnClick="Button1_Click" />
</div>
<div style="clear: both; height: 20px"></div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" CssClass="table" Width="40%">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Description" HeaderText="Description" />
</Columns>
</asp:GridView>
<script>
$(document).ready(function () {
console.log("on page load select2 combo box setup")
$('#DropDownList1').select2()
});
</script>
Our code behind includes:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadData()
End If
End Sub
Sub LoadData()
Dim rstHotels As DataTable
rstHotels = MyRst("SELECT City FROM tblHotels
WHERE City is not null
GROUP BY City")
DropDownList1.DataSource = rstHotels
DropDownList1.DataBind()
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
LoadGrid()
End Sub
Sub LoadGrid()
Dim strSQL As String =
"SELECT * FROM tblHotelsA"
Dim strWhere As String = ""
Dim cmdSQL As New SqlCommand()
Dim ParamCount As Integer = 0
Dim sP As String = ""
For Each MyPick As ListItem In DropDownList1.Items
Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}")
If MyPick.Selected Then
If strWhere <> "" Then strWhere &= ","
ParamCount += 1
sP = $"@P{ParamCount}"
strWhere &= sP
cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text
End If
Next
If strWhere <> "" Then
strSQL &= $" WHERE City IN ({strWhere}) "
End If
strSQL &= " ORDER BY HotelName"
cmdSQL.CommandText = strSQL
Dim dt As DataTable = MyRstP(cmdSQL)
GridView1.DataSource = dt
GridView1.DataBind()
End Sub
In the above implementation, we have taken precautions against SQL injections by using SQL parameters.
If auto-post back is unnecessary for your project, you can eliminate the button and associated JavaScript change event on the select element.
For implementing select2 in your project, ensure jQuery integration and download the select2 library from .
A suggestion is to avoid SqlDataSource(s) in the markup if you require code control over data filtering and loading triggers. Global helper routines such as MyRst and MyRstP can streamline database operations and prevent repetitive connection code.
Furthermore, maintaining global application helper routines like MyRst and MyRstP reduces redundancy and enhances code efficiency.
https://i.sstatic.net/O9gIDVq1.gif