Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Database
For this example i have used Countries and State tables. You can download the database table SQL from the below link.
Download SQL file
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ViewBag.CountriesList = GetCountries();
ViewBag.StatesList = GetStates();
return View();
}
public JsonResult GetStates(string id)
{
List<SelectListItem> states = GetStates();
for (int i = 0; i < id.Split(',').Length; i++)
{
for (int j = 0; j < states.Count; j++)
{
if (states[j].Value == id.Split(',')[i])
{
states[j].Selected = true;
}
}
}
return Json(states, JsonRequestBehavior.AllowGet);
}
private List<SelectListItem> GetCountries()
{
List<SelectListItem> countries = new List<SelectListItem>();
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "SELECT CountryId,CountryName FROM Countries";
cmd.CommandType = CommandType.Text;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
countries.Add(new SelectListItem
{
Text = sdr["CountryName"].ToString(),
Value = sdr["CountryId"].ToString()
});
}
}
conn.Close();
}
return countries;
}
private List<SelectListItem> GetStates()
{
List<SelectListItem> states = new List<SelectListItem>();
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "SELECT StateId,CountryId,StateName FROM States";
cmd.CommandType = CommandType.Text;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
states.Add(new SelectListItem
{
Text = sdr["StateName"].ToString(),
Value = sdr["CountryId"].ToString()
});
}
}
conn.Close();
}
return states;
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function () {
$('#Country').multiselect();
$('#State').multiselect();
$("#Country").change(function () {
var countryId = $("#Country").val();
$.ajax({
type: 'GET',
url: '/Home/GetStates/' + countryId,
success: function (result) {
$("#State").empty();
$('#State').multiselect('destroy');
$.each(result, function (i, state) {
if (state.Selected) {
$("#State").append('<option value="' + state.Value + '" selected=true>' + state.Text + '</option>');
} else {
$("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
}
});
$('#State').multiselect();
}, error: function (r) {
}
});
});
});
</script>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<p>
<label>Select Country : @Html.ListBox("Country", ViewBag.CountriesList as List<SelectListItem>, "---Select---") </label>
</p>
<p>
<label>Select State : @Html.ListBox("State", ViewBag.StatesList as List<SelectListItem>, "---Select---")</label>
</p>
}
</body>
</html>
Screenshot
