I’m trying to show content in a <select>
tag but only if i select a specific thing on another <select>
tag; for example: if i select the Renault brand, i want my “car models” <select>
to return only Renault models.
This function shows car brands, and its linked to a select tag in html:
function loadBrand() {
let carBrand = document.getElementById('brand');
brands.forEach(function(brandName) {
let opt = document.createElement('option');
opt.value = brandName;
opt.innerHTML = brandName;
carBrand.appendChild(opt);
});
}
I want to make a function called loadModels() that shows only the models of cars within a specific brand, as shown below:
const brandModels = {
renault: [ 'Clio', 'Kwid', 'Sandero', 'Logan', 'Oroch', 'Duster' ],
fiat: [ 'Argo', 'Uno', 'Mobi', 'Cronos', 'Palio', 'Toro', ],
honda: [ 'Civic', 'Fit', 'City', 'HRV', 'Accord', 'CRV' ],
peugeot: [ '2008', '208', '3008', '5008', 'Expert', 'Boxer' ],
chevrolet: [ 'Onix', 'S10', 'Vectra', 'Cobalt', 'Tracker', 'Cruze' ],
volkswagen: [ 'Gol', 'Polo', 'Saveiro', 'Virtus', 'Nivus', 'Amarok' ],
hyundai: [ 'HB20', 'Creta', 'Tucson', 'Sonata', 'Santa Fé', 'IX35' ],
nissan: [ 'March', 'Kicks', 'Leaf', 'Sentra', 'Versa', 'Frontier' ],
toyota: [ 'Corolla', 'Yaris', 'SW4', 'Hilux', 'Etios', 'Prius' ],
}
const brands = [ 'Renault', 'Fiat', 'Honda',
'Peugeot', 'Chevrolet', 'Hyundai',
'Volkswagen', 'Nissan', 'Toyota' ];
Thanks in advance!