CODEWITHSUNDEEP
javascripthtml
davidvarenne
davidvarenne

Reputation: 141

Multiple dependent drop down list updating Javascript HTML

following the example in https://www.w3schools.com/jsref/coll_select_options.asp there is an example with two dependent drop-down list updading:

<!DOCTYPE html>
<html>
<body>   

<select id="car" onchange="ChangeCarList()"> 
  <option value="">-- Car --</option> 
  <option value="VO">Volvo</option> 
  <option value="VW">Volkswagen</option> 
  <option value="BMW">BMW</option> 
</select> 

<select id="carmodel"></select> 

<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
} 
</script>

</body>
</html>

I'd like to add to this code another nested list that depend on the modelList (and indirectly the carList) in order to get as output a third select tag with some other options.

example 1: if I select VO --> then v70 --> get [option x_1, optionx_2..]

example 2: if I select VO --> then xC60 --> get [optiony_1, optiony_2..]

example 3: if I select BMW --> then M6--> get [optionz_1, optionz_2..]

Hope to be clear!

Upvotes: 1

Views: 9816

Answers (1)

user3210641
user3210641

Reputation: 1631

here is a pen with solution to your problem : https://codepen.io/pen/VxJgWM

HTML code:

<!DOCTYPE html>
<html>
<body>    
  <select id="cars-select" onchange="updateModels()">
    <option value="" disabled selected>--- Car ---</option>
  </select> 

  <select id="models-select" onchange="updateConfigurations()">
    <option value="" disabled selected>--- Model ---</option>
  </select>

  <select id="configurations-select">
    <option value="" disabled selected>--- Configuration ---</option>
  </select> 
</body>
</html>

and Javascript

/**
 * Helper function for creating car
 **/
function createCar(name, id) {
  return {
    name: name,
    id: id,
  };
}

/**
 * Helper function for creating model
 **/
function createModel(name, id, car) {
  return {
    name: name,
    id: id,
    car: car,
  };
}

/**
 * Helper function for creating configuration
 **/
function createConfiguration(name, id, model) {
  return {
    name: name,
    id: id,
    model: model,
  };
}

/**
 * Removes all options but the first value in a given select
 * and than selects the only remaining option
 **/
function removeOptions(select) {
  while (select.options.length > 1) {                
    select.remove(1);
  }

  select.value = "";
}

/**
 * Adds given options to a given select
 **/
function addOptions(select, options) {
  console.log(select, options)
  options.forEach(function(option) {
    select.options.add(new Option(option.name, option.id));
  });
}

/**
 * Select elements references
 **/
var carsSelect = document.getElementById('cars-select');
var modelsSelect = document.getElementById('models-select');
var configurationSelect = document.getElementById('configurations-select');

/**
 * Available cars
 **/
var cars = [
  createCar('BMW', 'bmw'),
  createCar('Volkswagen', 'volk'),
  createCar('Ford', 'ford'),
];

/**
 * Available models
 **/
var models = [
  createModel('M6', 'm6', 'bmw'),
  createModel('M5', 'm5', 'bmw'),
  createModel('Golf', 'golf', 'volk'),
  createModel('Passat', 'passat', 'volk'),
  createModel('Focus', 'focus', 'ford'),
  createModel('Mondeo', 'mondeo', 'ford'),
];

/**
 * Available configurations
 **/
var configurations = [
  createConfiguration('M6 Sedan', 'sedan', 'm6'),
  createConfiguration('M6 Coupe', 'coupe', 'm6'),
  createConfiguration('M5 Sedan', 'sedan', 'm5'),
  createConfiguration('M5 Coupe', 'coupe', 'm5'),
  createConfiguration('Golf Sedan', 'sedan', 'golf'),
  createConfiguration('Golf Coupe', 'coupe', 'golf'),
  createConfiguration('Passat Sedan', 'sedan', 'passat'),
  createConfiguration('Passat Coupe', 'coupe', 'passat'),
  createConfiguration('Focus Sedan', 'sedan', 'focus'),
  createConfiguration('Focus Coupe', 'coupe', 'focus'),
  createConfiguration('Mondeo Sedan', 'sedan', 'mondeo'),
  createConfiguration('Mondeo Coupe', 'coupe', 'mondeo'),
];

/**
 * Updates models
 **/
function updateModels() {
  var selectedCar = carsSelect.value;
  var options = models.filter(function(model) {
    return model.car === selectedCar;
  });

  removeOptions(modelsSelect);
  removeOptions(configurationSelect);
  addOptions(modelsSelect, options);
}

/**
 * Updates configurations
 */
function updateConfigurations() {
  var selectedModel = modelsSelect.value;
  var options = configurations.filter(function(configuration) {
    return configuration.model === selectedModel;
  });

  removeOptions(configurationSelect);
  addOptions(configurationSelect, options);
}

/**
 * Adds options to car select
 **/
addOptions(carsSelect, cars);

Upvotes: 3

Related Questions