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等），在所有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/

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

2 个答案: