如何使用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);