Hi soumya1110,
I have created a sample which full fill your requirement you need to modify the code according to your need.
Controller -> HomeController
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
List<SelectListItem> CountryList = new List<SelectListItem>
{
new SelectListItem{Text="India",Value="1"},
new SelectListItem{Text="United States",Value="2"},
new SelectListItem{Text="Australia",Value="3"},
new SelectListItem{Text="South Africa",Value="4"},
new SelectListItem{Text="China",Value="5"}
};
ViewBag.CountryList = CountryList;
return View();
}
public JsonResult GetStates(string id)
{
List<SelectListItem> statesList = new List<SelectListItem>();
statesList.Add(new SelectListItem { Text = "---Select---", Value = "-1" });
switch (id)
{
case "1":
statesList.Add(new SelectListItem { Text = "Andaman", Value = "1" });
statesList.Add(new SelectListItem { Text = "Karnataka", Value = "2" });
statesList.Add(new SelectListItem { Text = "Maharashtra", Value = "3" });
statesList.Add(new SelectListItem { Text = "Tamilnadu", Value = "4" });
break;
case "2":
statesList.Add(new SelectListItem { Text = "Arizona", Value = "5" });
statesList.Add(new SelectListItem { Text = "California", Value = "6" });
statesList.Add(new SelectListItem { Text = "NewYork", Value = "7" });
statesList.Add(new SelectListItem { Text = "NewJersey", Value = "8" });
break;
case "1,2":
statesList.Add(new SelectListItem { Text = "Andaman", Value = "1" });
statesList.Add(new SelectListItem { Text = "Karnataka", Value = "2" });
statesList.Add(new SelectListItem { Text = "Maharashtra", Value = "3" });
statesList.Add(new SelectListItem { Text = "Tamilnadu", Value = "4" });
statesList.Add(new SelectListItem { Text = "Arizona", Value = "5" });
statesList.Add(new SelectListItem { Text = "California", Value = "6" });
statesList.Add(new SelectListItem { Text = "NewYork", Value = "7" });
statesList.Add(new SelectListItem { Text = "NewJersey", Value = "8" });
break;
}
return Json(statesList, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCities(string id)
{
List<SelectListItem> citiesList = new List<SelectListItem>();
citiesList.Add(new SelectListItem { Text = "---Select---", Value = "-1" });
switch (id)
{
case "2":
citiesList.Add(new SelectListItem { Text = "Bangalore", Value = "1" });
citiesList.Add(new SelectListItem { Text = "Mangalore", Value = "2" });
citiesList.Add(new SelectListItem { Text = "Mysore", Value = "3" });
citiesList.Add(new SelectListItem { Text = "CoOrg", Value = "4" });
break;
case "3":
citiesList.Add(new SelectListItem { Text = "Mumbai", Value = "5" });
citiesList.Add(new SelectListItem { Text = "Pune", Value = "6" });
citiesList.Add(new SelectListItem { Text = "NagPur", Value = "7" });
break;
case "2,3":
citiesList.Add(new SelectListItem { Text = "Bangalore", Value = "1" });
citiesList.Add(new SelectListItem { Text = "Mangalore", Value = "2" });
citiesList.Add(new SelectListItem { Text = "Mysore", Value = "3" });
citiesList.Add(new SelectListItem { Text = "CoOrg", Value = "4" });
break;
}
return Json(citiesList, JsonRequestBehavior.AllowGet);
}
}
View ->Index.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#Country').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
maxHeight: '300',
buttonWidth: '235',
numberDisplayed: 2,
nonSelectedText: 'Select Country',
});
$('#State').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
maxHeight: '300',
buttonWidth: '235',
numberDisplayed: 2,
nonSelectedText: 'Select State',
});
$('#City').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
maxHeight: '300',
buttonWidth: '235',
numberDisplayed: 2,
nonSelectedText: 'Select City',
});
$("#Country").change(function () {
var countryId = $("#Country").val();
$.ajax({
type: 'GET',
url: '/Home/GetStates/' + countryId,
success: function (result) {
$("#State").empty();
$("#City").empty();
$('#State').multiselect('destroy');
$.each(result, function (i, state) {
$("#State").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
$('#State').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
maxHeight: '300',
buttonWidth: '235',
numberDisplayed: 2,
nonSelectedText: 'Select State',
});
}
});
});
$("#State").change(function () {
$.ajax({
type: 'GET',
url: '/Home/GetCities/' + $("#State").val(),
success: function (result) {
$("#City").empty();
$('#City').multiselect('destroy');
$.each(result, function (i, state) {
$("#City").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
$('#City').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
maxHeight: '300',
buttonWidth: '235',
numberDisplayed: 2,
nonSelectedText: 'Select City',
});
}
});
});
});
</script>
</head>
<body>
<div align="center">
<h3>Example For Cascading DropdownList...</h3>
<p>
<label>Select Country : @Html.ListBox("Country", ViewBag.CountryList as List<SelectListItem>, "---Select---") </label>
</p>
<p>
<label>
Select State : @Html.ListBox("State", new SelectList(new string[] { }), "---Select---")
</label>
</p>
<p>
<label>Select City : @Html.ListBox("City", new SelectList(new string[] { }), "---Select---") </label>
</p>
</div>
</body>
</html>
ScreenShot
