動態生成表格元素 - 滾動條ID？

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調用，根據它從後端獲取項目並將其填充到下拉列表中。我需要獲取我無法檢索的動態創建的下拉菜單的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); 
    }); 

UPDATE： 看到這個工作提琴。我已經模擬了由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; 

}