【问题标题】：How can I create more than one dynamic select box dependent on one selection?如何根据一个选择创建多个动态选择框？
【发布时间】：2019-07-24 15:30:03
【问题描述】：

我正在尝试创建一个包含多个组合框选择的表单。我希望第一个组合框的选择影响以下框中的选择。我只能让一对工作。我复制了该函数并更改了 ID，以便它反映在传递的参数中，但它仍然只适用于一对。下面的代码是我通过教程开始的，我想添加额外的框，例如雪佛兰有白色、黑红色，道奇有蓝色、绿色和黑色。我如何根据第一个盒子制作额外的盒子？

我尝试复制函数和 html 行并将 id 和名称更改为 slct1、slct2、slct3。当我添加填充函数时，我将 s1,s3 作为新参数传递。我还尝试将它全部包含在一个函数中，并添加了要传递的其他参数。

<!DOCTYPE html>
<html>
<head>
<script>
function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "Chevy"){
        var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } else if(s1.value == "Dodge"){
        var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
        var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
    <option value=""></option>
    <option value="Chevy">Chevy</option>
    <option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />  
</body>
</html>

我的预期结果是用户选择一辆车（雪佛兰、道奇、福特等），然后其他框会根据该选择、型号和颜色填充选项。我只能让主框和第一个从属框工作。

【问题讨论】：

标签： javascript html

【解决方案1】：

这是一个示例，说明如何将另一个 <select> 添加到已建立的模式中。可能有更简洁的方法可以做到这一点，但要遵守教程，这将起作用。

function populate(s1) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById('model');
  var s3 = document.getElementById('color');
  
  s2.innerHTML = "";
  s3.innerHTML = "";
  
  if (s1.value == "Chevy") {
    var modelArray = ["|", "camaro|Camaro", "corvette|Corvette", "impala|Impala"];
    var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
  } else if (s1.value == "Dodge") {
    var modelArray = ["|", "avenger|Avenger", "challenger|Challenger", "charger|Charger"];
    var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
  } else if (s1.value == "Ford") {
    var modelArray = ["|", "mustang|Mustang", "shelby|Shelby"];
    var colorArray = ["|", "red|Red", "green|Green", "blue|Blue"];
  }
  
  for (var option in modelArray) {
    var pair = modelArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
  }
  
  for (var option in colorArray) {
    var pair = colorArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s3.options.add(newOption);
  }
}

<h2>Choose Your Car</h2>
<hr /> Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id)">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr /> Choose Car Model:
<select id="model" name="slct2"></select>
<hr /> Choose Car Color:
<select id="color" name="slot3"></select>
<hr />

如果您有任何问题，请告诉我！

【讨论】：

【解决方案2】：

这里我只为第一个选项添加红色、白色和黑色的代码。其他选项没有颜色问候语

enter code here
<!DOCTYPE html>
<html>
<head>

<script>
function populate(s1,s2,slcolor){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    slcolor.innerHTML= "";
    if(s1.value == "Chevy"){
        var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
        var optionColor = ["|","red|Red","white|White","black|Black"];
    } else if(s1.value == "Dodge"){
        var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
        var optionColor = ["|"];
    } else if(s1.value == "Ford"){
        var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
        var optionColor = ["|"];
    }
    for(var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }

    for(var option in optionArray) {
        var pair = optionColor[option].split("|");
        var newOptionC = document.createElement("option");
        newOptionC.value = pair[0];
        newOptionC.innerHTML = pair[1];
        slcolor.options.add(newOptionC);
    }

}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2',slcolor)">
    <option value=""></option>
    <option value="Chevy">Chevy</option>
    <option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr /> 

Choose Color:
<select id="slcolor" name="slcolor"></select>
<hr />  

</body>
</html>

【讨论】：

【解决方案3】：

我对您的代码做了一些更改：

只获取一次引用

选择总是相同的，只是选项发生了变化，所以我将选择移到了另一个范围。

var form = document.querySelector('form');
var brandSelect = form.querySelector('#brand');
var modelSelect = form.querySelector('#model');
var colorSelect = form.querySelector('#color');

克隆元素

克隆对象一直请求 DOM 创建新对象。

var optionElement = document.createElement('option');
...
var optionModel = optionElement.cloneNode(true);

保护作用域

将您的代码包装在一个自动调用的函数中，以避免将您的变量和函数置于全局范围内。这避免了库之间可能发生的一些冲突。

(function(){...})();

创建数据引用

数据引用更具可读性，如果出现问题也易于调试。

var brandOptions = {
  Chevy: {
    model: ['camaro', 'corvette', 'impala'],
    color: ['white', 'black', 'red'],
  },
  Dodge: {
    model: ['avenger', 'challenger', 'charger'],
    color: ['blue', 'green', 'black'],
  },
  Ford: {
    model: ['camaro', 'corvette', 'impala'],
    color: ['red', 'green', 'blue'],
  },
}

完整示例

(function(){
  var form = document.querySelector('form');
  var brandSelect = form.querySelector('#brand');
  var modelSelect = form.querySelector('#model');
  var colorSelect = form.querySelector('#color');
  var optionElement = document.createElement('option');
  
  var brandOptions = {
    Chevy: {
      model: ['camaro', 'corvette', 'impala'],
      color: ['white', 'black', 'red'],
    },
    Dodge: {
      model: ['avenger', 'challenger', 'charger'],
      color: ['blue', 'green', 'black'],
    },
    Ford: {
      model: ['camaro', 'corvette', 'impala'],
      color: ['red', 'green', 'blue'],
    },
  };
  
  function addOptionIntheSelect(options) {
    modelSelect.innerHTML = '';
    
    options.model.forEach(function(model) {
      var optionModel = optionElement.cloneNode(true);
      optionModel.value = model;
      optionModel.innerHTML = model;
      modelSelect.appendChild(optionModel);
    });
    
    colorSelect.innerHTML = '';
    
    options.color.forEach(function(color) {
      var optionColor = optionElement.cloneNode(true);
      optionColor.value = color;
      optionColor.innerHTML = color;
      colorSelect.appendChild(optionColor);
    });
  }
  
  function onSelectChange(event) {
    addOptionIntheSelect(brandOptions[event.target.value]);
  }
  
  brandSelect.onchange = onSelectChange;
})();

.container {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

label, select {
  display: block;
  width: 100%;
  box-sizing: borde-box;
}

select {
  text-transform: Capitalize;
}

label {
  margin-bottom: 8px;
}

form > div {
  padding: 8px 0;
}

<div class="container">
  <form>
    <div>
      <label for="">Choose Car Make:</label>
      <select id="brand" name="brand">
        <option value=""></option>
        <option value="Chevy">Chevy</option>
        <option value="Dodge">Dodge</option>
        <option value="Ford">Ford</option>
      </select>
    </div>

    <div>
      <label for="">Choose Car Model:</label>
      <select id="model" name="slct2"></select>
    </div>

    <div>
      <label for="">Choose Car Color:</label>
      <select id="color" name="slot3"></select>  
    </div>
  </form>  
</div>

【讨论】：