how to acheive this cascading dropdown lists like country,state,city using ajax and jquer in mvc I have a page called company details where I need to enter company Address like country,state,city. now, my requirement is if I select INDIA as Country so all the list of states in INDIA should be displayed in state drop down-box from that I should pick one state say Andhra Pradesh if I pick it all the cities in Andhra Pradesh should be displayed in city drop down-box.
@model CascadingDropdown.Models.Country
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<h2>Cascading Dropdownlist</h2>
<table>
<tr>
<td>
<label>Country</label>
</td>
<td id="Country">
@Html.DropDownListFor(x => x.CountryName, Model.lstCountry, "--Select--", new { @id =
"ddlCountry" })
- List item
</td>
</tr>
<tr>
<td>
<label>State</label>
</td>
<td id="State">
@Html.DropDownListFor(x => x.StateName, new List<SelectListItem>(), "--Select--", new { @id =
"ddlState" })
</td>
</tr>
<tr>
<td>
<label>City</label>
</td>
<td id="City">
@Html.DropDownListFor(x => x.CityName, new List<SelectListItem>(), "--Select--", new { @id = "ddlCity" })
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#ddlCountry').change(function () {
$.ajax({
type: "post",
url: "/Home/GetState",
data: { Country_Code: $('#ddlCountry').val() },
datatype: "json",
traditional: true,
success: function (data) {
var state = "<select id='ddlState'>";
state = state + '<option value="">--Select--</option>';
for (var i = 0; i < data.length; i++) {
state = state + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
state = state + '</select>';
$('#State').html(state);
}
});
});
});
</script>*****