在动态添加的行上链接选择

Question

I found this from previous Question, The Answer is Working OK on Two Select List.
But if i need to Add Third Select even when its not Associated from the First And Second Select,
The Chained Select Function Will Not Work.
I Want to Add a Third Select which is not associated from the Two Select.

Here is the Content of the Previous Question

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

Here is The Link:

http://jsfiddle.net/f433g/

Kindly help me with this Guys, Thanks

Answer 1

The problem was from the select:last selector, the new #series selects weren't getting the rowCnt added to their ID.

as you know the id of the select you can use that for the selector instead.

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

http://jsfiddle.net/2KBsw/