javascript / jquery克隆在下拉列表中不起作用

Question

我在上一篇文章中问了一个问题，我希望动态生成行，并且应该将数据复制到新行中。 它工作正常，但仅适用于文本字段。 但是我的表单中也有下拉菜单，并且没有在新行中显示最后一行的选定选项。 这是我的问题， 将先前的行数据添加到动态生成的行

我有html代码：

<form>
    <table border="1" id="engagements">
        <tr>
            <th>
                <input type="checkbox" onclick="checkAll(this)" />
            </th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" onclick="checkAll(this)" />
            </td>
            <td>
                <select>
                    <option value = "1">One</option>/>
                     <option value = "1">two</option>/>
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
    <select name="mode" id="mode">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
    </select>
</form>

和脚本代码：

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    console.log(rows);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
});

JS小提琴： http ： //jsfiddle.net/jW6eL/3/

Answer 1

由于性能原因，jquery在克隆元素时不会保留选择。 但是，您可以尝试使用

    .clone(true) 

这将复制所有的偶数和数据。 这样，您可以使用事件，然后在下拉菜单中选择最后一个选项。

Answer 2

尝试这个

http://jsfiddle.net/jW6eL/7/

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    console.log(rows);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().html();
        $('#engagements tr:last').after('<tr>'+lastRow+'</tr>');
        $('#engagements tr:last').find('select').each(function(){
            var this_select=$(this);
            this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val())
        })
    }
});