Hi zgy,
I have created the sample using the below link. You need to change the code as per your table structure.
For SplitString function refer the below article.
SQL
SELECT CountryId,CountryName FROM Countries
SELECT StateId,StateName,CountryId FROM States
SELECT CityId,CityName,StateId FROM Cities
GO
CREATE PROCEDURE [dbo].[GetStates]
@CountryIds VARCHAR(100)
AS
BEGIN
SELECT StateId,StateName
FROM States
WHERE CountryId IN(
SELECT CAST(Item AS INTEGER)
FROM dbo.SplitString(@CountryIds, ',')
)
END
GO
CREATE PROCEDURE [dbo].[GetCities]
@StateIds VARCHAR(100)
AS
BEGIN
SELECT CityId,CityName
FROM Cities
WHERE StateId IN(
SELECT CAST(Item AS INTEGER)
FROM dbo.SplitString(@StateIds, ',')
)
END
HTML
<div>
Countries :
<asp:DropDownList ID="ddlCountries" runat="server" multiple="multiple" CssClass="multiselect">
</asp:DropDownList>
<br />
States :
<asp:DropDownList ID="ddlStates" runat="server" multiple="multiple" CssClass="multiselect">
</asp:DropDownList>
<br />
Cities :
<asp:DropDownList ID="ddlCities" runat="server" multiple="multiple" CssClass="multiselect">
</asp:DropDownList>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
<br />
<asp:Label ID="lblIds" runat="server" />
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default.aspx")%>';
var LastSelectedState = [];
var LastSelectedCity = [];
$(function () {
$('#<%=ddlCountries.ClientID %>').multiselect({
includeSelectAllOption: true,
maxHeight: 200,
onDropdownHidden: function (event) {
var selectedCountries = [];
$('[id*=ddlCountries] option:selected').each(function () {
selectedCountries.push($(this).val());
});
var targetDropdown = $('#<%=ddlStates.ClientID %>');
var countriesData = '{countryIds: "' + selectedCountries.join(',') + '"}';
PopulateDropDownList(selectedCountries, $(targetDropdown), pageUrl, 'PopulateStates', countriesData);
}
});
$('#<%=ddlStates.ClientID %>').multiselect({
includeSelectAllOption: true,
maxHeight: 200
});
$('#<%=ddlCities.ClientID %>').multiselect({
includeSelectAllOption: true,
maxHeight: 200
});
});
function PopulateDropDownList(selectedValue, targetDropdown, pageUrl, methodName, data) {
$(targetDropdown).attr("disabled", "disabled");
if (selectedValue.length != 0) {
$('#' + targetDropdown[0].id).multiselect('destroy');
$(targetDropdown).empty().append('<option selected="selected" value="0">Loading...</option>');
BindDropdownAfterDestroyed(targetDropdown[0].id);
$.ajax({
type: "POST",
url: pageUrl + '/' + methodName,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
PopulateControl(response.d, targetDropdown);
},
failure: function (response) {
alert(response.d);
}
});
}
}
function PopulateControl(list, control) {
if (list.length > 0) {
$('#' + control[0].id).multiselect('destroy');
control.removeAttr("disabled");
control.empty();
$.each(list, function () {
control.append($("<option></option>").val(this['Value']).html(this['Text']));
});
if (control[0].id == 'ddlStates') {
if (LastSelectedState.length != 0) {
$(LastSelectedState).each(function () {
$(control).find('option[value="' + $(this)[0] + '"]').attr('selected', true);
});
}
} else if (control[0].id == 'ddlCities') {
if (LastSelectedCity.length != 0) {
$(LastSelectedCity).each(function () {
$(control).find('option[value="' + $(this)[0] + '"]').attr('selected', true);
});
}
}
BindDropdownAfterDestroyed(control[0].id);
}
}
function BindDropdownAfterDestroyed(dropdownId) {
$('#' + dropdownId).multiselect({
includeSelectAllOption: true,
maxHeight: 200,
onDropdownHidden: function (event) {
if (dropdownId == 'ddlStates') {
$('[id*=' + dropdownId + '] option:selected').each(function () {
LastSelectedState.push($(this).val());
var selectedStates = [];
$('[id*=ddlStates] option:selected').each(function () {
selectedStates.push($(this).val());
});
var targetDropdown1 = $('#<%=ddlCities.ClientID %>');
var statesData = '{stateIds: "' + selectedStates.join(',') + '"}';
PopulateDropDownList(selectedStates, $(targetDropdown1), pageUrl, 'PopulateCities', statesData);
});
} else if (dropdownId == 'ddlCities') {
$('[id*=' + dropdownId + '] option:selected').each(function () {
LastSelectedCity.push($(this).val());
});
}
}
});
}
</script>
</div>
Code
static string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.PopulateCountries();
}
}
private void PopulateCountries()
{
String strQuery = "SELECT CountryId,CountryName FROM Countries";
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandType = CommandType.Text;
cmd.CommandText = strQuery;
cmd.Connection = con;
con.Open();
ddlCountries.DataSource = cmd.ExecuteReader();
ddlCountries.DataTextField = "CountryName";
ddlCountries.DataValueField = "CountryId";
ddlCountries.DataBind();
con.Close();
}
}
}
[System.Web.Services.WebMethod]
public static ArrayList PopulateStates(string countryIds)
{
Thread.Sleep(2000);
ArrayList states = new ArrayList();
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand("GetStates"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@CountryIds", countryIds);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
states.Add(new ListItem(sdr["StateName"].ToString(), sdr["StateId"].ToString()));
}
con.Close();
return states;
}
}
}
[System.Web.Services.WebMethod]
public static ArrayList PopulateCities(string stateIds)
{
Thread.Sleep(2000);
ArrayList cities = new ArrayList();
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand("GetCities"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@StateIds", stateIds);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
cities.Add(new ListItem(sdr["CityName"].ToString(), sdr["CityId"].ToString()));
}
con.Close();
return cities;
}
}
}
protected void Submit(object sender, EventArgs e)
{
string selectedCountries = Request.Form[ddlCountries.UniqueID];
string selectedStates = Request.Form[ddlStates.UniqueID];
string selectedCities = Request.Form[ddlCities.UniqueID];
lblIds.Text = "Selected Countries Id: " + selectedCountries + "<br/>Selected States Id: " + selectedStates + "<br/>Selected Cities Id: " + selectedCities;
}
Screenshot
