Chained / Dependent Dropdowns
Load the second dropdown's options via AJAX based on the selection of the first — common for Country → State, Category → Subcategory.
jQuery
Intermediate
4 min read
Dependent Dropdowns
Example
$("#country").on("change", function() {
const countryId = $(this).val();
$("#state").html(`<option>Loading...</option>`);
$.getJSON("/api/states?country=" + countryId, function(states) {
const options = states.map(s =>
`<option value="${s.id}">${s.name}</option>`
).join("");
$("#state").html(`<option value="">Select state...</option>` + options);
});
}); Pro Tip
Show a "Loading..." option in the dependent dropdown while the AJAX request is in flight.