使用 jQuery 动态添加行不适用于 Select 元素

Question

在我的表单中，我有一个输入和选择字段。使用下面的代码，可以通过单击“添加行”按钮动态添加行。然而，在添加 2 个选择行后，jQuery 停止工作。我尝试了很多方法但未能使其发挥作用。还尝试在 ViewBag 属性中添加下拉列表并在 jQuery 中传递它，但仍然没有成功。

下面是我的代码

查看

<div style="width:700px; padding:5px; background-color:white;">
<form action="/SendDSR/AddDsr" method="post"><input name="__RequestVerificationToken" type="hidden" value="UgokOCFRFUqBT7l2lHFCloLmDf6388pD7WwFMCyA2egHbAYjEVODbDx0r-jIClvtvELLq-zdTPB0C9e9ZM4wx3BrRwsqfWb2cZXZ72RHpQBqjW5-NRKRdMoND8Slii2BzEd02oITPVPCVBdBJezUTQ2" />            <button class="btn btn-md btn-primary"
                    id="addBtn" type="button">
                Add New Row
            </button>
        <table id="dataTable" border="0" cellpadding="0" cellspacing="0" class="table table-hover">
            <tr>
                <th>Project</th>
                <th>Task</th>
                <th class="status">Status</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
                    <tr style="border:1px solid black">
                        <td><select class="form-control proj" name="[0].ProjectsList"><option value="1">MCY</option>
<option value="2">TWM</option>
<option value="3">KHL</option>
<option value="4">PTS</option>
</select></td>
                        <td><input class="form-control task" name="[0].Task" required="required" type="text" value="" /></td>
                        <td><select class="form-control stdrod" name="[0].Status"><option selected="selected" value="Completed">Completed</option>
<option value="InProgress">InProgress</option>
<option value="ToDo">ToDo</option>
<option value="Blocker">Blocker</option>
</select></td>
                    <td><input class="id" data-val="true" data-val-number="The field UserId must be a number." data-val-required="The UserId field is required." name="[0].UserId" type="hidden" value="1" /></td>
                    <td><input class="email" name="[0].Email" type="hidden" value="[email protected]" /></td>
                    <td><input data-val="true" data-val-date="The field Date must be a date." name="[0].Date" type="hidden" value="2/2/2024 12:00:00 AM" /></td>
                        <td></td>
                        <td>
                        </td>
                    </tr>
                    <tbody id="tbody"></tbody>
        </table>

jQuery

$("#addBtn").click(function (e) {
    e.preventDefault();
    var $tableBody = $("#dataTable");
    var $trLast = $tableBody.find("tr:last");
    var e = $(".email").val();
    var id = $(".id").val();
    var $trNew = $trLast.clone();

    debugger;
    var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
    $trNew.find("td:last").html('<a href="#" class="remove btn btn-warning" id="delete">Remove</a>');
    $.each($trNew.find(':input'), function (i, val) {
        // Replaced Name
        var oldN = $(this).attr('name');
        var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
        $(this).attr('name', newN);
        //Replaced value
        var type = $(this).attr('type');
        if (type.toLowerCase() == "text") {
            $("#id").attr('value', id);
            $("#email").attr('value', e);
        }

        // If you have another Type then replace with default value
        $(this).removeClass("input-validation-error");

    });
    $trLast.after($trNew);

    // Re-assign Validation
    var form = $("form")
        .removeData("validator")
        .removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(form);
});

Answer 1

问题是第一个元素是一个选择框所以

var type = $(this).attr('type');

将以

undefined

的形式出现（因为对于选择框

.prop(type)

可以工作）

因此，像这样更改您的代码，它将对您有用：

if (type !== undefined && type.toLowerCase() == "text") {