Populating One Select Box Based on the Selection in Another Select Box - JQuery?
as you mentioned that : towns to be dynamic, and able to be read from a database you can get dynamic data by passing it with ajax.
Ajax Get from controller to read from database based Country which user has selected:
<script>
$(document).ready(function () {
$("#counties").on('change', function () {
var selectedItem = $(this).val();
var ddlStates = $("#towns"); // will be update after success ajax call
var statesProgress = $("#states-loading-progress");
statesProgress.show();
$.ajax({ // get states/towns from db from controller
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetStatesByCountryId"))",
data: { "countryId": selectedItem, "addSelectStateItem": "true" },
success: function (data) {
ddlStates.html('');
$.each(data, function (id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
}); // populating result
statesProgress.hide(); // hide loader
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
statesProgress.hide();
}
});
});
});
</script>
And on controller :
public virtual IActionResult GetStatesByCountryId(string countryId, bool addSelectStateItem)
{
var model = _countryModelFactory.GetStatesByCountryId(countryId, addSelectStateItem);
return Json(model);
}
Then on Data access layer _countryModelFactory.GetStatesByCountryId()
i get towns/states from db based the country/town user has selected.
Update :
It's the way i retrieving states/towns from db (dynamic country/towns) and populating them to selectbox
in my code.