如何使用asp.net C＃中的Ajax和Web服務使用數據庫中的數據填充動態創建的下拉列表

Question

var index = 0;
function newitem() {

    index++;
    var objTo = document.getElementById('newitem')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass" + index);
    var rdiv = 'removeclass' + index;
    divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group">
<select class="form-control" id="ddlitem' + index + '"name="ddlitem"><option
value="">--select--</select> </div></div><div class="col-sm-3
nopadding"><div class="form-group"> <input type="text"
class="form-control" id="txtquantity' + index + '" 
name="txtquantity" value=""></div></div><div class="col-sm-3
nopadding"><div class="form-group"> <input type="text"
class="form-control" id="txtprice' + index + ' "name="txtprice"
disabled="disabled" value="" ></div></div><div class="col-sm-3
nopadding"><div class="form-group"><div class="input-group"> <input
type="text" class="form-control" id="txttotal' + index + '"
name="txttotal" disabled="disabled" value="" ><div
class="input-group-btn"> <button class="btn btn-danger"
type="button" onclick="remove_created_item(' + index + ');"> <span
class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button></div></div></div></div><div class="clear"></div>';
    objTo.appendChild(divtest);
};

function remove_created_item(idOfCreatedItem) {
    $('.removeclass' + idOfCreatedItem).remove();
}

Answer 1

太亂了，但我想我知道您在做什么。

在objTo.appendChild(divtest); 將您select下拉列表插入頁面，對API進行Ajax調用：

var copyOfIndex = index;
$.get( "/api/whatever", function( data ) {
 $( "#ddlitem" + copyOfIndex ).html( data ); // data => can be the html containing all the <options> 
 alert( "Load was performed." );
});

不確定上面的代碼是如何初始化的，但是您應該使用索引的副本（此處為copyOfIndex ）來確保ajax調用完成時ajax調用未使用過時的index值。

另外，看起來您需要先關閉對象，然后再通過objTo.appendChild(divtest);將元素插入DOM中objTo.appendChild(divtest);