Here I have created sample that will help you out.
HTML
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
PopulateStates();
$('[id*=ddlStates]').on('change', function () {
$('[id*=divCities]').hide();
if ($(this).val() != 0) {
PopulateCities($(this).val());
}
});
});
function PopulateStates() {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "Default.aspx/PopulateDropDownList",
data: "{}",
dataType: "json",
success: function (result) {
$("#ddlStates").empty();
$("#ddlStates").append("<option value='0'>--Select--</option>");
$.each(result.d, function (key, value) {
$("#ddlStates").append($("<option></option>").html(value.State));
});
},
error: function ajaxError(result) {
alert(result.status + ':' + result.statusText)
}
});
}
function PopulateCities(state) {
$('[id*=loadingCity]').show();
$.ajax({
type: "POST",
url: "Default.aspx/PopulateCities",
data: '{state:"' + state + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var cities = r.d;
var repeatColumns = parseInt("<%=chkCities.RepeatColumns%>");
if (repeatColumns == 0) {
repeatColumns = 1;
}
var cell = $("[id*=chkCities] td").eq(0).clone(true);
if (cities.length > 0) {
$('[id*=divCities]').show();
$("[id*=chkCities] tr").remove();
}
$.each(cities, function (i) {
var row;
if (i % repeatColumns == 0) {
row = $("<tr />");
$("[id*=chkCities] tbody").append(row);
} else {
row = $("[id*=chkCities] tr:last-child");
}
var checkbox = $("input[type=checkbox]", cell);
checkbox[0].checked = false;
checkbox[0].id = checkbox[0].id.replace("0", i);
checkbox[0].name = "CityId";
checkbox.val(this.City);
var label = cell.find("label");
if (label.length == 0) {
label = $("<label />");
}
label.attr("for", checkbox[0].id);
label.html(this.City);
cell.append(label);
row.append(cell);
cell = $("[id*=chkCities] td").eq(0).clone(true);
});
$("[id*=chkCities] input[type=checkbox]").click(function () {
var cell = $(this).parent();
var hidden = cell.find("input[type=hidden]");
var label = cell.find("label");
if ($(this).is(":checked")) {
if (hidden.length == 0) {
hidden = $("<input type = 'hidden' />");
cell.append(hidden);
}
hidden[0].name = "CityName";
hidden.val(label.text());
cell.append(hidden);
} else {
cell.remove(hidden);
}
});
$('[id*=loadingCity]').hide();
}
, failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
</script>
<div>
<fieldset style="width: 410px;">
<legend>Select State</legend>
<asp:DropDownList ID="ddlStates" runat="server" Width="160px">
</asp:DropDownList>
</fieldset>
<fieldset style="width: 410px;">
<legend>Select City</legend>
<div id="loadingCity" style="display: none">
Loding Cities....
</div>
<div id="divCities" style="display: none">
<asp:CheckBoxList ID="chkCities" runat="server">
<asp:ListItem Text="" Value=""></asp:ListItem>
</asp:CheckBoxList>
</div>
</fieldset>
</div>
</div>
C#
public class States
{
public string State { get; set; }
public string Country { get; set; }
}
[WebMethod]
public static List<States> PopulateDropDownList()
{
DataTable dt = new DataTable();
List<States> objStates = new List<States>();
objStates.AddRange(new States[2]{
new States(){
State = "Maharashtra",
Country = "India"
},
new States(){
State = "U.P",
Country = "India"
}
});
return objStates;
}
public class Cities
{
public string City { get; set; }
public string State { get; set; }
}
[WebMethod]
public static List<Cities> PopulateCities(string state)
{
Thread.Sleep(2000);
DataTable dt = new DataTable();
List<Cities> objCiteis = new List<Cities>();
objCiteis.AddRange(new Cities[3]{
new Cities(){
State = "Maharashtra",
City = "Mumbai"
},
new Cities(){
State = "Maharashtra",
City = "Thane"
},
new Cities(){
State = "U.P",
City = "Joanpur"
}
});
List<Cities> citiesBasedonState = objCiteis.Where(city => city.State == state).ToList<Cities>();
return citiesBasedonState;
}
VB
Public Class States
Public Property State() As String
Get
Return m_State
End Get
Set
m_State = Value
End Set
End Property
Private m_State As String
Public Property Country() As String
Get
Return m_Country
End Get
Set
m_Country = Value
End Set
End Property
Private m_Country As String
End Class
<WebMethod> _
Public Shared Function PopulateDropDownList() As List(Of States)
Dim dt As New DataTable()
Dim objStates As New List(Of States)()
objStates.AddRange(New States(1) {New States() With { _
Key .State = "Maharashtra", _
Key .Country = "India" _
}, New States() With { _
Key .State = "U.P", _
Key .Country = "India" _
}})
Return objStates
End Function
Public Class Cities
Public Property City() As String
Get
Return m_City
End Get
Set
m_City = Value
End Set
End Property
Private m_City As String
Public Property State() As String
Get
Return m_State
End Get
Set
m_State = Value
End Set
End Property
Private m_State As String
End Class
<WebMethod> _
Public Shared Function PopulateCities(state As String) As List(Of Cities)
Thread.Sleep(2000)
Dim dt As New DataTable()
Dim objCiteis As New List(Of Cities)()
objCiteis.AddRange(New Cities(2) {New Cities() With { _
Key .State = "Maharashtra", _
Key .City = "Mumbai" _
}, New Cities() With { _
Key .State = "Maharashtra", _
Key .City = "Thane" _
}, New Cities() With { _
Key .State = "U.P", _
Key .City = "Joanpur" _
}})
Dim citiesBasedonState As List(Of Cities) = objCiteis.Where(Function(city) city.State = state).ToList(Of Cities)()
Return citiesBasedonState
End Function
Screenshot
