Hãy thử triển khai JS thuần túy sau -
var stateObject = {
"Three Wheelers": {
"Bajaj": ["Bajaj RE CNG", "Bajaj Diesel"],
"Atul": ["Piaggo", "Shakti"]
},
"Two Wheelers": {
"Hero": ["Splendor", "CBZ"],
"Honda": ["Hornet", "CBR"],
},
"Car": {
"Suzuki": ["Swift", "Ciaz", "Baleno", "Dzire", "Brezaa", "Ertiga", "Celerio", "Eco", "Omni", "Alto", "Scross", "Ignis", "WagonR"],
"Hyundai": ["i20", "i10", "Creat", "Eon", "Xcent", "Santro", "Tucson", "Elatrna"],
"Volkswagon": ["Jetta", "Polo", "Passata", "Polo", "Tiguan", "Ameo"],
"Nissan": ["Terrano", "Duster", "Micra", "Sunny"],
"Honda": ["City", "Verna", "CR-V", "Accord", "BR-V", "Brio", "Amaze", "Jazz"],
"Ford": ["EcoSports", "Endaviour", "Figo", "Freestyle", "Aspire"],
}
}
window.onload = function() {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function() {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
countySel.options[0].text = "Select Brand"
citySel.options[0].text = "Select Modal"
return; // done
}
countySel.options[0].text = "Select Brand"
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
if (countySel.options.length == 2) {
countySel.selectedIndex = 1;
countySel.onchange();
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function() {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) {
citySel.options[0].text = "Please Modal"
return; // done
}
citySel.options[0].text = "Please Modal"
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
if (citySel.options.length == 2) {
citySel.selectedIndex = 1;
citySel.onchange();
}
}
}
<select id="stateSel" size="1" name="vehicle_type" class="form-control input" required>
<option value="" selected="selected">Select Vehicle</option>
</select>
<br>
<br>
<select id="countySel" size="1" name="brand" class="form-control input" required>
<option value="" selected="selected">Select Brand</option>
</select>
<br>
<br>
<select id="citySel" size="1" name="modal" class="form-control input" required>
<option value="">Select Modal</option>
</select>