cascading Country and state DDL
@Html.DropDownListFor(model => model.CountryId, Model.CountryList, "--Select Country--", new { @class = "CountryList", style = "width:150px" })
@Html.DropDownListFor(model => model.StateId, Model.StateList, "--Select State--", new { @class = "StateList", style = "width:150px" })
<script type="text/javascript">
$(document).ready(function () {
$.post("/Client/GetModels", { id: $(".CountryList").val() }, function (data) {
populateDropdown($(".StateList"), data);
});
$(".CountryList").change(function () {
$.post("/Client/GetModels", { id: $(this).val() }, function (data) {
populateDropdown($(".StateList"), data);
});
});
});
function populateDropdown(select, data) {
$(".StateList").empty();
$.each(data, function (id, option) {
$(".StateList").append("<option value='" + option.StateId + "'>" + option.State + "</option>");
});
}
</script>