链接选择动态添加的行

时间:2014-07-09 17:23:28

标签: javascript jquery

我从之前的问题中找到了这个,答案在两个选择列表上正常工作 但是如果我需要添加第三选择,即使它与第一和第二选择不相关, 链式选择功能不起作用。
我想添加与“双选”无关的第三个选择。

以下是上一个问题的内容

<table id="tableID" border="1">
<tbody>
<tr>
  <td> <a href="#" onClick="addRow(tableID)">Add</a>
  </td>
  <td>
    <select id="mark" name="mark">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
    </select>
  </td>
  <td>
    <select id="series" name="series">
    <option value="series-3" class="bmw">3 series</option>
    <option value="series-5" class="bmw">5 series</option>
    <option value="series-6" class="bmw">6 series</option>
    <option value="a3" class="audi">A3</option>
    <option value="a4" class="audi">A4</option>
    <option value="a5" class="audi">A5</option>
    </select>
  </td>
 </tr>
</tbody>

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

这是链接:

http://jsfiddle.net/f433g/

请帮助我这个家伙,谢谢

1 个答案:

答案 0 :(得分:1)

问题来自select:last选择器,新的#series选择没有将rowCnt添加到他们的ID中。

如您所知,您可以将选择的ID用于选择器。

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

http://jsfiddle.net/2KBsw/