个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 20:29:19 25 4
gpt4 key购买 nike

按照 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)的嵌套列表，以便将第三个 select 标记作为输出，并提供一些其他选项。

示例 1:如果我选择 VO --> 然后 v70 --> 得到 [option x_1, optionx_2..]

示例 2:如果我选择 VO --> 然后 xC60 --> 得到 [optiony_1, optiony_2..]

示例 3:如果我选择 BMW --> 然后 M6--> 得到 [optionz_1, optionz_2..]

希望清楚!

最佳答案

这是一支可以解决您问题的笔: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);

关于javascript - 多个依赖下拉列表更新 Javascript HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50531730/

25 4 0
文章推荐： c# - 我应该如何在 C# 中使用 WellKnownTypes？
文章推荐： c - 无论如何，是否可以创建一个 if 语句来打印输出，说明我已经超出了多少公斤？
文章推荐： c# - Fluent Validation，在 Asp.NET Core 中对列表中的每个项目进行不同的验证
文章推荐： javascript - 映射从 React 中的 Express 服务器获取的 JavaScript 对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com