javascript - jQuery 根据其他选择框替换选择中的值

Question

我有以下数组:

var LWTable = [];
LWTable.push([6,200,200,220]);
LWTable.push([8,220,220,240]);
LWTable.push([10,240,240,260]);
LWTable.push([12,260,260,290]);
LWTable.push([15,290,310,340]);
LWTable.push([18,330,360,400]);
LWTable.push([21,385,420,460]);

以及以下 html:

<select name="plength" id="plength">
  <option value="6" selected>6 in.</option>
  <option value="8">8 in.</option>
  <option value="10">10 in.</option>
  <option value="12">12 in.</option>
  <option value="15">15 in.</option>
  <option value="18">18 in.</option>
  <option value="21">21 in.</option>
</select>
<select name="pwidth" id="pwidth">
  <option value="Width1" selected>Width 1 (xw1x)</option>
  <option value="Width2">Width 2 (xw2x)</option>
  <option value="Width3">Width 3 (xw3x)</option>
</select>

我想要的是，当我为 plength 选择值 8 时，在 pwidth 选择框中，xw1x、xw2x 和 xw3x 字符串将被 MinLoadTable 中的值替换，因此在本例中它将显示 220， 220 和 240。当我选择 21 时，它会自动将该文本替换为 385,420,460。

这可能吗？如果可能的话，如何实现？我试图查找一些例子，但没有找到任何地方......任何帮助或指导将不胜感激!

Answer 1

如果可以将 JS 代码中的数据结构更改为对象，则可以使这变得非常简单。首先，您可以在加载时从对象的键创建 plength 选择选项。然后，在更改 plength 时，您可以使用选定的值在对象中查找键并填充 pwidth 的选项。试试这个:

var LWTable = {
  '6': [200, 200, 220],
  '8': [220, 220, 240],
  '10': [240, 240, 260],
  '12': [260, 260, 290],
  '15': [290, 310, 340],
  '18': [330, 360, 400],
  '21': [385, 420, 460],
}

var plengthOptions = '';
Object.keys(LWTable).forEach(function(key) {
  plengthOptions += '<option value="' + key + '">' + key + ' in.</option>';
});

$('#plength').append(plengthOptions).change(function() {
  var pwidthOptions = '';
  LWTable[this.value].forEach(function(width, i) {
    pwidthOptions += '<option value="Width' + (i + 1) + '">Width' + (i + 1) + ' (' + width + ')</option>';
  });
  $('#pwidth').html(pwidthOptions);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="plength" id="plength"></select>
<select name="pwidth" id="pwidth"></select>