下拉菜單表，其中第二列的值取決於第一列的值

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，item_1，category_2，item_2。

為了避免必須重復執行selectchange（）函數（例如selectchange_1，selectchange_2等），請向所有category_xx字段添加一個類（例如class =“ category”），而不要使用$（'[[name = category ]'）。on（'change'...使用$（'。category'）。on（'change'...，然后將ID中的數字傳遞給selectchange（）。

Answer 2

看起來兩對<select>元素都具有相同的名稱。 當您執行$('[name=items]') ，JQuery選擇所有匹配的元素，然后您的.append()調用將項目追加到兩個下拉菜單中。

這是一個JSFiddle，它為每對下拉列表使用單獨的名稱來說明一個解決方案： https ://jsfiddle.net/prutbkr8/