Hi ,
the below code is not working incase of multiselect.Please check with the given code then uncomment the commented portion and you will be able to understand the problem
<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>
$(document).ready(function () {
$("#Country").change(function () {
var countryId = $("#Country").val();
$.ajax({
type: 'GET',
url: '/Home/GetStates/'+countryId,
success: function (result) {
$("#State").empty();
$("#City").empty();
$.each(result, function (i, state) {
$("#State").append('<option value="'+state.Value+'">'+
state.Text+'</option>');
});
}
});
});
$("#State").change(function () {
$.ajax({
type: 'GET',
url: '/Home/GetCities/' + $("#State").val(),
success: function (result) {
$("#City").empty();
$.each(result, function (i, state) {
$("#City").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
}
});
});
});
</script>
</head>
<body>
<div>
<h2>Example For Cascading DropdownList...</h2>
<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>
<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 type="text/javascript">
$('#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',
//});
</script>
</body>
</html>
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);
}
