bugfix> javascript > 投稿

の例に従ってhttps://www.w3schools.com/jsref/coll_select_options.asp 2つの依存するドロップダウンリストを更新する例があります。

<!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)に依存する別のネストされたリストを追加して、他のオプションを含む3番目のselectタグを出力として取得したいと思います。

例1: VOを選択した場合-> 次にv70-> get [オプションx_1、オプションx_2 ..]

例2: VOを選択した場合-> 次にxC60-> get [optiony_1、optiony_2 ..]

例3: BMWを選択した場合-> 次にM6-> get [optionz_1、optionz_2 ..]

明確になることを願っています!

回答 1 件
  • ここにあなたの問題を解決するペンがあります: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);
    
    

あなたの答え