Question

$(document).on("click", "#btnAdd", function () {

            var functionName = document.getElementById("selectFunction");
            var Text = functionName.options[functionName.selectedIndex].text
            var Value = functionName.options[functionName.selectedIndex].value;

            $("#tblWorkpack tbody").append(
                 "<tr>" +
                 "<td><input type='text' disabled class='form-control' value='" + Text + "' /></td>" +
                 "<td><select id='xyz'></select></td>" +
                "</tr>");

            // Find the id of dynamically generated for the new Dropdownbox 
            var responsibleUsersDropdown = $('#tblWorkpack tr td:nth-child(2)').attr('id');
            alert(responsibleUsersDropdown)
            var Url = '@Url.Action("FindUser","Home")';
            $.post(Url, { Functionid: Value }, function (data) {
                responsibleUsersDropdown.empty();
                for (var i = 0; i < data.length; i++) {
                    responsibleUsersDropdown.append('<option value?+data[i].UserId+?="">' + data[i].FullName + '</Option>');
                }
            });

            selectedFunctions.push(Value);
        });

所以我试图在点击按钮时创建一个动态行。点击事件上的'btnAdd'会创建一个包含文本框和下拉框的新行。我需要根据文本框中的值进行ajax调用，从后端获取项目并将其填入下拉列表中。我需要获取动态创建的Dropdown的ID，我无法检索。任何帮助是极大的赞赏。

Answer 1

首先，当您通过jQuery添加元素时，不会神奇地创建id。 id是你自己设置的html属性。

你真正想要的是某种方式来引用你创建的元素，这与html id无关。您可以通过执行以下操作来完成此操作（请参阅下面的已加星标的评论以获得解释）：

    $(document).on("click", "#btnAdd", function () {

        var functionName = document.getElementById("selectFunction");
        var Text = functionName.options[functionName.selectedIndex].text
        var Value = functionName.options[functionName.selectedIndex].value;

        $("#tblWorkpack tbody").append(
             "<tr>" +
             "<td><input type='text' disabled class='form-control' value='" + Text + "' /></td>" +
             "<td><select id='xyz'><option>1</option><option>2</option><option>3</option></select></td>" +
            "</tr>");

        // ***** set the variable $responsibleUsersDropdown to point to the last tr
        // created.  Note that the $ in front of the variable name is simply a  
        // convention to indicate that this variable is a jQuery object.
        var $responsibleUsersDropdown = $("#tblWorkpack tbody tr:last-of-type");


        var Url = '@Url.Action("FindUser","Home")';
        $.post(Url, { Functionid: Value }, function (data) {
            // ***** $responsibleUsersDropdown in the callback will refer to the value set 
            // in the enclosing function above.
            $responsibleUsersDropdown.empty();
            for (var i = 0; i < data.length; i++) {
                $responsibleUsersDropdown.append('<option value?+data[i].UserId+?="">' + data[i].FullName + '</Option>');
            }
        });

        selectedFunctions.push(Value);
    });

<强>更新看到这个工作小提琴。我已经模拟了AJAX调用返回的数据，因为我们无法运行那个小提琴。 http://jsfiddle.net/manishie/kqa8jff7/我在代码中遇到了很多错误，我已在下面修复过。您可以使用此代码，将其放入您的站点，然后重新启用AJAX调用，它应该可以正常工作。

var selectedFunctions = [];

$(document).on("click", "#btnAdd", function () {

    var functionName = document.getElementById("selectFunction");
    var Text = functionName.options[functionName.selectedIndex].text
    var Value = functionName.options[functionName.selectedIndex].value;

    // change this code around.  first we create a new javascript object with just the new row
    var $new_row = $("<tr>" +
        "<td><input type='text' disabled class='form-control' value='" + Text + "' /></td>" +
        "<td><select></select></td>" +
        "</tr>");
    // now append that as before:
    $("#tblWorkpack tbody").append($new_row);

    // the following line was wrong - this(...) doesn't mean anything
    // var $responsibleUsersDropdown = this("#tblWorkpack tbody tr td:nth-child(2)");
    // anyhow change that line so that we look at the $new_row and find the select within it
    var $responsibleUsersDropdown = $new_row.find('select');

    // comment out some of the code below and simulate the ajax call:
    /*
    var Url = '@Url.Action("FindUser","Home")';
    $.post(Url, {
        Functionid: Value
    }, function (data) { */
    // simulate data result from ajax
    var data = [{
        UserID: '1',
        FullName: 'john doe'
    }, {
        UserID: '2',
        FullName: 'jane doe'
    }];

    $responsibleUsersDropdown.empty();
    for (var i = 0; i < data.length; i++) {
        // you had the wrong variable name below (forgot the $)
        $responsibleUsersDropdown.append('<option value?+data[i].UserId+?="">' + data[i].FullName + '</Option>');
    }
    /*
    });
*/
    var i = 0;
    i = i + 1;

    selectedFunctions.push(Value);

});

$(document).on("click", "#btnDelete", function () {
    $("#tblWorkpack tr:last").remove();
    selectedFunctions.pop();
});

function SetWorkpacks() {
    var tempvalue = document.getElementById('selectedwp');
    tempvalue.value = selectedFunctions;

}

动态生成的表元素 - 滚动条ID？

1 个答案: