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

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

第一列包含我们正在销售的产品的类型，而第二列包含设备的子类型。（例如：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>

-
类型1
类型2
类型3
类型4
-
-
类型1
类型2
类型3
类型4
-

脚本部分：

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);
});

var类别={
“-”：[{值：'3'，文本：'-'}]，
“类型1”：[{value:'1'，text:'model1'}，{value:'2'，text:'model2'}]，
“类型2”：[{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'}]
};
函数selectchange（）{
var select=$（'[name=items]'）；
select.empty（）；
$.each（类别[$（':selected'，this）.text（）]，函数（）{
select.append（“”+this.text+“”）；
});
}
$（函数（）{
$（'[name=category]'）。在（'change'，选择change）；
});

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

这里的工作JFiddle示例：

---

每行的字段名称需要不同-例如，类别\ 1、项目\ 1、类别\ 2、项目\ 2

---

为了避免重复selectchange（）函数（例如，selectchange_1、selectchange_2等），在所有类别字段中添加一个类（例如，class=“category”），而不是$（'[name=category]'）。on（'change'…使用$（'.category'）。on（'change'…并将编号从id传递给selectchange（）

下面是一个JSFIDLE，它为每对下拉列表使用单独的名称来说明一个解决方案：