jquery - 克隆包含选择的行，并克隆选择的值

Question

我有这个 HTML:

<tr>
    <td>
        <input type="hidden" name="MatchId[]" value="">
        <select name="TeamId[]">
            <optgroup label="Women">
                <option value="18">Women 1</option>
                <option value="17">Women 2</option>
            </optgroup>
            <optgroup label="Men">
                <option value="9">Men 1</option>
                <option value="8">Men 2</option>
            </optgroup>
        </select>
    </td>
    <td>
        <select name="Day[]">
            <!-- blah -->
        </select>
    </td>
    <td>
        <input class="addButton" type="button" value="+">
    </td>
    <td>
        <input class="removeButton" type="button" value="-">
    </td>
</tr>

我想在单击 + 按钮时克隆该行，但也设置 <select> 的值与原始行相同。

现在，我有这段代码，它成功克隆了该行，但留下了新的 <select>将第一个值作为选择的字段:

$('.addButton').livequery('click', function()
{
    var $btn = $(this);

    var $clonedRow = $btn.closest('tr').clone();

    $btn.closest('tbody').append( $clonedRow );
});

我怎样才能做到这一点？

编辑:附属问题:单击+按钮后如何将焦点设置在克隆行的第一个字段上？

Answer 1

您可以手动完成:

http://jsfiddle.net/Tp7hg/

$('.addButton').live('click', function()
{
    var $btn = $(this);
    var $row = $btn.closest('tr')

    var $clonedRow = $row.clone();
    $clonedRow.find("select").each(function(i){
        this.selectedIndex = $row.find("select")[i].selectedIndex;
    })

    $btn.closest('tbody').append( $clonedRow );
});