下拉菜单 table，其中第二列值取决于第一列值

Question

我的公司让我开发一个供内部使用的网站。该网站包含一个具有多行和多列下拉菜单的表单。

第一列包含我们销售的产品类型，而第二列包含设备的子类型。（例如：Type1 - Model1，或 Type1 - Model2）

多行的目的是让我们可以同时上传多个设备。到目前为止，我想出了这个：

  <tr><td><select name="category">
      <option value="0">-</option>
      <option value="1">Type1</option>
      <option value="2">Type2</option>
      <option value="3">Type3</option>
      <option value="4">Type4</option>
  </select></td>
  <td><select name="items">
      <option value="3">-</option>
  </select> </td> </tr>
  <tr><td><select name="category">
      <option value="0">-</option>
      <option value="1">Type1</option>
      <option value="2">Type2</option>
      <option value="3">Type3</option>
      <option value="4">Type4</option>
  </select></td>
  <td><select name="items">
      <option value="3">-</option>
  </select> </td> </tr>

和脚本部分：

var categories = {
  "-": [{value: '3',text: '-'}],
  "Type1": [{value: '1',text: 'model1'}, {value: '2',text: 'model2'}],
  "Type2": [{value: '4',text: 'model3'}, {value: '10',text: 'model4'}],
  "Type3": [{value: '6',text: 'model5'},{value: '6',text: 'model6'}, {value: '7',text: 'model7'}],
  "Type4": [{value: '8',text: 'model8'}, {value: '9',text: 'model9'}, {value: '11',text: 'model10'}, {value: '12',text: 'model11'}, {value: '13',text: 'DELUXE EDITION'}]
};

function selectchange() {
  var select = $('[name=items]');
  select.empty();

  $.each(categories[$(':selected', this).text()], function() {
    select.append('<option value="' + this.value + '">' + this.text + '</option>');
  });
}
$(function() {
  $('[name=category]').on('change', selectchange);
});

我不需要数据库，因为产品和型号列表不会发生重大变化。我的问题是：例如，每当我更改第二行子类型时，第一行子类型也会更改。我应该在脚本中修改什么以使每一行单独运行？（最好是我可以 $_post 所有值作为数组。）

在这里工作的 JFiddle 示例： https://jsfiddle.net/L2cwqrus/

Answer 1

每行的字段名称需要不同 - 例如，category_1、items_1、category_2、items_2。

为了避免必须重复 selectchange() 函数（例如，selectchange_1、selectchange_2 等），添加一个 class（例如，class="category") 到所有 category_xx 字段，而不是 $('[name=category]').on('change'... 使用 $('.category')。 on('change'... 并将 id 中的数字传递给 selectchange()。

Answer 2

您的 <select> 对元素似乎同名。当您执行 $('[name=items]') 时，JQuery 选择所有匹配的元素，然后您的 .append() 调用将项目附加到两个下拉菜单。

这是一个 JSFiddle，它为每对下拉菜单使用单独的名称来说明一个解决方案：https://jsfiddle.net/prutbkr8/

下拉菜单 table，其中第二列值取决于第一列值

Dropdown menu table, where the second column value depends on the first column value

html

javascript

php

jquery