Несколько зависимых выпадающих списков обновления Javascript HTML - PullRequest
Новая
       0

Несколько зависимых выпадающих списков обновления Javascript HTML

0 голосов
/ 25 мая 2018

, следуя примеру в https://www.w3schools.com/jsref/coll_select_options.asp, есть пример с обновлением двух зависимых раскрывающихся списков: 

<!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>

Я хотел бы добавить к этому коду еще один вложенный список, который зависит отmodelList (и косвенно carList), чтобы получить в качестве вывода третий тег выбора с некоторыми другими параметрами.

пример 1: если я выберу VO ->, то v70 -> get [option x_1, optionx_2..]

пример 2: если я выберу VO ->, тогда xC60 -> get [optiony_1, optiony_2 ..]

пример 3: если я выберу BMW ->, тогда M6-> получить [optionz_1, optionz_2 ..]

Надеюсь, что будет ясно!

1 Ответ

0 голосов
/ 25 мая 2018

вот ручка с решением вашей проблемы: https://codepen.io/pen/VxJgWM

HTML-код: 

<!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>

и 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...