Question

按照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 - ＆gt;那么v70 - ＆gt;获取[选项x_1，选项x_2 ..]

示例2：如果我选择VO - ＆gt;那么xC60 - ＆gt;得到[optiony_1，optiony_2 ..]

示例3：如果我选择宝马 - ＆gt;那么M6 - ＆gt;得到[optionz_1，optionz_2 ..]

希望明确！

Answer 1

这是一支解决您问题的笔：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>

和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);

多个依赖下拉列表更新Javascript HTML

1 个答案: