下拉选择会填充多个其他下拉列表

Question

从颜色下拉列表中选择应根据选择的颜色填充特定，交替和阴影下拉列表。当只有一个下拉列表填充时，我必须填充下拉列表的代码。如何使这项工作填充多个下拉？

我的例子：

<table>
<tr>
<td>
Color: <select id="color">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
</select>
</td>
</tr>
<tr>
<td>
Specific: <select id="specific">
</select>    
</td>
</tr>
<tr>
<td>
Alternate: <select id="alternate">
</select>    
</td>
</tr>
<tr>
<td>
Shade: <select id="shade">
</select>    
</td>
</tr>
</table>

使用功能：

(function() {
  var bOptions = {
    "blue": ["Periwinkle", "Navy Blue"],
    "green": ["Lime", "Emerald"],
    "yellow": ["Lemon", "Gold"],
  };

  var color = document.getElementById('color');
  var specific = document.getElementById('specific');

  color.onchange = function() {
    specific.length = 0;
    var _val = this.options[this.selectedIndex].value;
    for (var i in bOptions[_val]) {
      var op = document.createElement('option');
      op.value = bOptions[_val][i];
      op.text = bOptions[_val][i];
      specific.appendChild(op);
    }
  };
  color.onchange();  

  var bOptions = {
    "blue": ["Ice Blue"],
    "green": ["Forest", "Chartreuse"],
    "yellow": ["Canary"],
  };

  var alternate = document.getElementById('alternate');

  color.onchange = function() {
    alternate.length = 0;
    var _val = this.options[this.selectedIndex].value;
    for (var i in bOptions[_val]) {
      var op = document.createElement('option');
      op.value = bOptions[_val][i];
      op.text = bOptions[_val][i];
      alternate.appendChild(op);
    }
  };
  color.onchange();  

  var bOptions = {
    "blue": ["Light Blue", "Dark Blue"],
    "green": ["Light Green", "Dark Green"],
    "yellow": ["Light Yellow", "Dark Yellow"],
  };

  var shade = document.getElementById('shade');

  color.onchange = function() {
    shade.length = 0;
    var _val = this.options[this.selectedIndex].value;
    for (var i in bOptions[_val]) {
      var op = document.createElement('option');
      op.value = bOptions[_val][i];
      op.text = bOptions[_val][i];
      shade.appendChild(op);
    }
  };
  color.onchange(); 
  })();

Answer 1

此代码段适用于每个颜色更改选项，根据颜色更改其他选项。

＆＃13;

＆＃13;

  var selectOptions = {
    specific: {
      "blue": ["Periwinkle", "Navy Blue"],
      "green": ["Lime", "Emerald"],
      "yellow": ["Lemon", "Gold"]
    },
    alternate: {
      "blue": ["Ice Blue"],
      "green": ["Forest", "Chartreuse"],
      "yellow": ["Canary"]
    },
    shade: {
      "blue": ["Light Blue", "Dark Blue"],
      "green": ["Light Green", "Dark Green"],
      "yellow": ["Light Yellow", "Dark Yellow"]
    }
  }

  var color = document.getElementById('color');
  
  var selectElements = {
    specific: document.getElementById('specific'),
    alternate: document.getElementById('alternate'),
    shade: document.getElementById('shade')
  }
  
  color.onchange = function() {
    var _val = this.options[this.selectedIndex].value;
    for (var _select in selectOptions) {
      var options = selectOptions[_select][_val];
      selectElements[_select].length = 0;
      for (var i in options) {
        var op = document.createElement('option');
        op.value = options[i];
        op.text = options[i];
        selectElements[_select].appendChild(op);
      }
    }
  };
  color.onchange();

＆＃13;

<table>
<tr>
<td>
Color: <select id="color">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="yellow">Yellow</option>
</select>
</td>
</tr>
<tr>
<td>
Specific: <select id="specific">
</select>    
</td>
</tr>
<tr>
<td>
Alternate: <select id="alternate">
</select>    
</td>
</tr>
<tr>
<td>
Shade: <select id="shade">
</select>    
</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;