在使用jQuery添加新行期间保留先前选定的值

Question

我正在使用jQuery向表添加新行。我有一个下拉行，使用json动态绑定。现在，当我添加行前一行的所选选项时，即重置。我正在使用点击按钮添加新行

<a href="#" style="margin-top:20px;" id="insert-more" class="btn btn-primary" onclick="AddNewRow();"><i class="fa fa-plus"></i> Add Row </a>

$(document).ready(function () {
    Bind();
});

function AddNewRow() {
    var NewRow = ('<tr class="invoicerow">');
    NewRow += ('<td class="taskclass"><select class="form-control task" id="city" name="city"></select>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('<td class="mondaytext"><input type="text" id="pincode" class="form-control" name="pincode" data-parsley-trigger="change" required /></td>');
    NewRow += ('</tr>');
    $("#dvtexttable").append(NewRow);     
    Bind();  
};

function Bind() {
    $.getJSON('/TimesheetEntry/TaskList/', function (data) {
        var items = '<option>Select a TaskList</option>';
        $.each(data, function (i, finish) {
            items += "<option value='" + finish.Value + "'>" + finish.Text + "</option>";
        });
        $('.task').html(items);
    });
};

这是我的代码。任何帮助都会非常感激。

Answer 1

这一行：

$('.task').html(items);

更新页面上的所有selects，而不仅仅是新行的selects，重新创建以前的Bind()s（因此似乎重置了值）。

您需要将新行传递给select函数，以便它知道要更新哪个.appendTo

这些最简单的方法是使用$("#dvtexttable").append(NewRow) 将新行作为jquery对象返回。

---

当你使用：

#dvtexttable

你返回$(NewRow).appendTo("#dvtexttable")) ，而：

var row = $(NewRow).appendTo("#dvtexttable"));
Bind(row);  

添加后会返回新行

这给你：

function Bind(row) {
    $.getJSON('/TimesheetEntry/TaskList/', function (data) {
        var items = '<option>Select a TaskList</option>';
        $.each(data, function (i, finish) {
            items += "<option value='" + finish.Value + "'>" + finish.Text + "</option>";
        });
        // add row here to ensure it only affects the new row
        $('.task', row).html(items);
        // alternate:  row.find(".task").html(items)
    });
};

和

qazxswpoi