克隆包含选择的行，并克隆选择的值答案

【问题标题】：Clone a row containing selects, and clone selects' values克隆包含选择的行，并克隆选择的值
【发布时间】：2011-09-16 20:28:04
【问题描述】：

我有这个 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 );
});

我该怎么做？

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

【问题讨论】：

标签： jquery jquery-selectors clone field

【解决方案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 );
});

【讨论】：

谢谢你们俩。我同时在这里找到了答案stackoverflow.com/questions/742810/…
@Joseph、Mike 以及...每个人——我能想到的唯一其他选择就是使用 val 本身。我将使用该方法发布答案。

【解决方案2】：

尝试使用选择元素selectedIndex

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

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

    var index = $('select', $btn.closest('tr')).prop('selectedIndex');

    $('select', $clonedRow).prop('selectedIndex', index);

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

【讨论】：

【解决方案3】：

您可以将一个函数传递给val，它会给出索引。另外，我建议将 jQuery 对象存储在一个变量中，这样您就不必为每个选择都构建它。

$('.addButton').live('click', function() {
    var $btn = $(this),
        $row = $btn.closest('tr'),
        $clonedRow = $row.clone();
        $selects = $row.find('select');

    $btn.closest('tbody').append($clonedRow);
    $clonedRow.find('select').val(function(index) {
        return $selects.eq(index).val();
    });
});

【讨论】：

不错！我必须记住你可以将函数传递给 val。大多数jQuery方法都是这样吗？（我见过的唯一一个是过滤器）。
@Joseph - 是的，这种jQuery对象大部分都有可以传入的函数。非常好用，很少用。