<div class="col-xl-2">
<label>Family</label>
<select name="FamilyID" onchange="getBrandByfamilyId(this.value)" style="width :100%" asp-items="@ViewBag.Families" class="form-control form-control-user">
<option value="-1">Please select one</option>
</select>
</div>
<div class="col-xl-2">
<label>Brand</label>
<select name="BrandID" id="VehicleBrandID" style="width :100%" class="form-control form-control-user">
<option value="-1">Please select one</option>
</select>
</div>
function getBrandByfamilyId(val) {
$("#VehicleBrandID").empty();
var select = document.getElementById('VehicleBrandID');
var opt = document.createElement('option');
opt.value = -1;
opt.innerHTML = "Please select one";
select.appendChild(opt);
select.disabled = true;
if (val > 0) {
$.ajax({
type: "Post",
url: "/Vehicle/getBrandByfamilyId",
data: { "FamilyId": val },
success: function (response) {
if (response.status == 1) {
$.each(response.object, (i, e) => {
var opt = document.createElement('option');
opt.value = e.value;
opt.innerHTML = e.text;
select.appendChild(opt);
});
select.disabled = false;
} else {
throwException(response.object);
}
},
failure: function (response) {
throwException(response)
},
error: function (response) {
throwException(response)
}
})
}
}