Hi Rockstar8,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('#ddlCountry').select2({
placeholder: 'Select country',
allowClear: true
});
$('#ddlCity').select2({
placeholder: 'Select city',
allowClear: true
}).on("select2:unselecting", function (e) {
$(this).data('state', 'unselected');
}).on("select2:open", function (e) {
if ($(this).data('state') === 'unselected') {
$(this).removeData('state');
var self = $(this);
setTimeout(function () {
self.select2('close');
}, 1);
}
});
$('#ddlCountry').on("change", function () {
var countryParam = { "countryId": $("#ddlCountry option:selected").val() };
$.ajax({
url: 'Default.aspx/GetCities',
data: JSON.stringify(countryParam),
type: 'POST',
cache: false,
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (result) {
var dbSelect = $('#ddlCity');
//dbSelect.empty();
dbSelect.find("option").remove();
for (var i = 0; i < result.d.length; i++) {
dbSelect.append($('<option/>', {
value: result.d[i].Value,
text: result.d[i].Text
}));
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
Country :
<asp:DropDownList runat="server" ID="ddlCountry" Width="200px">
<asp:ListItem Text="USA" Value="USA" />
<asp:ListItem Text="UK" Value="UK" />
<asp:ListItem Text="India" Value="India" />
</asp:DropDownList>
<br />
City :
<asp:DropDownList runat="server" ID="ddlCity" Width="200px" multiple="multiple">
</asp:DropDownList>
</form>
</body>
</html>
Namespaces
C#
using System.Data.SqlClient;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<ListItem> GetCities(string countryId)
{
List<ListItem> cities = new List<ListItem>();
string constr = @"Data Source=.;Initial Catalog=Northwind;Integrated Security=true";
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT DISTINCT City FROM Employees WHERE Country = @Country", con))
{
cmd.Parameters.AddWithValue("@Country", countryId);
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
cities.Add(new ListItem { Text = sdr["City"].ToString(), Value = sdr["City"].ToString() });
}
}
con.Close();
}
}
return cities;
}
VB.Net
<WebMethod>
Public Shared Function GetCities(ByVal countryId As String) As List(Of ListItem)
Dim cities As List(Of ListItem) = New List(Of ListItem)()
Dim constr As String = "Data Source=.;Initial Catalog=Northwind;Integrated Security=true"
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT DISTINCT City FROM Employees WHERE Country = @Country", con)
cmd.Parameters.AddWithValue("@Country", countryId)
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
cities.Add(New ListItem With {
.Text = sdr("City").ToString(),
.Value = sdr("City").ToString()
})
End While
End Using
con.Close()
End Using
End Using
Return cities
End Function
Screenshot
