comunidadmexicanaroma says:
case "CountryId_p":
list = response.States;
DisableDropDown("#Com");
DisableDropDown("#CityId");
PopulateDropDown("#StateId_p", list);
dropDownId = "#Com";
list = response.Com;
PopulateDropDown("#Com", list);
break;
You have not disabled the StateId_p DropDownList.
Refer the sample code.
Model
public class CascadingModel
{
public CascadingModel()
{
this.Countries_p = new List<SelectListItem>();
this.Com = new List<SelectListItem>();
this.States = new List<SelectListItem>();
this.Cities = new List<SelectListItem>();
this.Cities2 = new List<SelectListItem>();
}
public List<SelectListItem> Countries_p { get; set; }
public List<SelectListItem> Com { get; set; }
public List<SelectListItem> States { get; set; }
public List<SelectListItem> Cities { get; set; }
public List<SelectListItem> Cities2 { get; set; }
public int CountryId_p { get; set; }
public int StateId_p { get; set; }
public int CityId { get; set; }
public int CityId2 { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
CascadingModel model = new CascadingModel();
model.Countries_p = PopulateDropDown("SELECT CountryId, CountryName FROM Countries", "CountryName", "CountryId");
return View(model);
}
[HttpPost]
public JsonResult AjaxMethod(string type, int value)
{
CascadingModel model = new CascadingModel();
switch (type)
{
case "CountryId_p":
model.States = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + value, "StateName", "StateId");
model.Com = PopulateDropDown("SELECT StateId, StateName FROM States WHERE CountryId = " + value, "StateName", "StateId");
break;
case "StateId_p":
model.Cities = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + value, "CityName", "CityId");
model.Cities2 = PopulateDropDown("SELECT CityId, CityName FROM Cities WHERE StateId = " + value, "CityName", "CityId");
break;
}
return Json(model);
}
private static List<SelectListItem> PopulateDropDown(string query, string textColumn, string valueColumn)
{
List<SelectListItem> items = new List<SelectListItem>();
string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
items.Add(new SelectListItem
{
Text = sdr[textColumn].ToString(),
Value = sdr[valueColumn].ToString()
});
}
}
con.Close();
}
}
return items;
}
}
View
@model Cascading_DropDownList_MVC.Models.CascadingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="row">
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.CountryId_p)
@Html.DropDownListFor(m => m.CountryId_p, Model.Countries_p, "[ === Select === ]", new { @Class = "Mytextarea2" })
</div>
</div>
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.StateId_p)
@Html.DropDownListFor(m => m.StateId_p, Model.States, "[ === Select === ]", new { @Class = "Mytextarea2" })
</div>
</div>
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.CityId)
@Html.DropDownListFor(m => m.CityId, Model.Cities, "[ === Select === ]", new { @Class = "Mytextarea2" })
</div>
</div>
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.CityId2)
@Html.DropDownListFor(m => m.CityId2, Model.Cities2, "[ === Select === ]", new { @Class = "Mytextarea2" })
</div>
</div>
<div class="col-md-3">
<div class="form-group">
@Html.LabelFor(m => m.Com)
@Html.DropDownListFor(m => m.Com, Model.Com, "[ === Select === ]", new { @Class = "Mytextarea2" })
@Html.ValidationMessageFor(m => m.Com, "", new { @class = "text-danger" })
</div>
</div>
</div>
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("select").each(function () {
if ($(this).find("option").length <= 1) {
$(this).attr("disabled", "disabled");
}
});
$("select").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{type: "' + id + '", value: ' + value + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var dropDownId;
var list;
switch (id) {
case "CountryId_p":
DisableDropDown("#StateId_p");
DisableDropDown("#Com");
DisableDropDown("#CityId");
DisableDropDown("#CityId2");
list = response.States;
PopulateDropDown("#StateId_p", list);
dropDownId = "#Com";
list = response.Com;
PopulateDropDown("#Com", list);
break;
case "StateId_p":
DisableDropDown("#CityId");
DisableDropDown("#CityId2");
dropDownId = "#CityId";
list = response.Cities;
PopulateDropDown("#CityId", list);
dropDownId = "#CityId2";
list = response.Cities2;
PopulateDropDown("#CityId2", list);
break;
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
function DisableDropDown(dropDownId) {
$(dropDownId).attr("disabled", "disabled");
$(dropDownId).empty().append('<option selected="selected" value="">[ === Select === ]</option>');
}
function PopulateDropDown(dropDownId, list) {
setTimeout(function () {
if (list != null && list.length > 0) {
$(dropDownId).removeAttr("disabled");
$.each(list, function () {
$(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
}, 1000);
}
$(function () {
if ($("#StateId_p").val() != "" && $("#CityId").val() != "") {
message += "\nState: " + $("#StateId_p option:selected").text();
message += "\nCity: " + $("#CityId option:selected").text();
alert(message);
}
});
</script>
</body>
</html>
Screenshot
