Question

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

我正在使用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);
  }

动态表行+链式选择

更新

1 个答案: