动态表行 + 链式选择

Question

我需要能够动态添加和删除不定数量的表行。我还需要能够在这些表行中链接选择框。我得到了预期的结果（这是错误的），但我不是 Javascript 爱好者，我不知道自己在做什么。

我正在使用chained.js script from Mika Tuupola 和几乎可以在任何地方找到的“动态表”脚本。

<table id="table">
<tr><td><input id="dept" name="dept[]" /></td>
    <td><input id="service" name="service[]" /></td>
    <td><input id="reason" name="reason[]" /></td>
</tr>
</table>

<script language="javascript">
     $("#service").chained("#dept");
     $("#reason").chained("#dept");

     function addRow(table) {
          var row = $('#table tbody>tr:last').clone(false);
          row.insertAfter('#table tbody>tr:last');
     }

     function delRow(el) {

          while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
               el = el.parentNode;
      }

          if (el.parentNode && el.parentNode.rows.length > 2) {
               el.parentNode.removeChild(el);
          }
     }
</script>

希望这足以说明问题。

很明显，因为链式选择是基于 ID 的。在第一个下拉菜单中进行选择后，“子”下拉菜单将链接到第一个下拉菜单。

我怀疑我需要以某种方式修改每个选择框的 ID，然后在链接分配中增加 ID。但我也怀疑可能有一种更简单的方法可以做到这一点，或者它需要某种委托，因为我可能需要在添加表格行后销毁并重新分配链......？

我不知道。任何指向正确方向的指针将不胜感激。

更新

我做了一个小提琴。它仅适用于 Chrome。框架/扩展的某些组合在其他浏览器中工作和部分工作。但是我唯一可以让这个例子工作的是 Chrome。抱歉，我没有很多 JSFiddle 练习。

http://jsfiddle.net/J2Vef/11/

请注意，如果您从第一个下拉列表中选择一个选项，然后添加一行，会发生什么情况。添加行的第二个下拉列表中的所有选项将是第一行中第一个下拉列表的选项。

如果您添加一行然后开始尝试选择选项，那么无论您在第一个下拉菜单中放置什么，第二个下拉菜单都不会激活。

Answer 1

试试这样的东西。您遇到的问题是您只能拥有一个具有一个 id 的元素。在您提供的示例中，您正在克隆表格行元素，但没有更改选择的 id 名称。此外，您还需要通过新 id 将新选择链接在一起。

这里是jsFiddle

我确信它们可能是编写此代码块的一种更简洁的方式，但它会帮助您重新开始。

 var row = $('#tableID tbody:first').html();
 $("#series").chained("#mark");

 function addRow(tableID) {
      $(row).appendTo('#tableID');
      var rowCnt = $('#tableID tbody>tr').length;

     $('#tableID tbody>tr:last select:first').attr('id','mark'+rowCnt);
     $('#tableID tbody>tr:last select:last').attr('id','series'+rowCnt);

    $('#series'+rowCnt).chained("#mark"+rowCnt);
  }