Javascript 如何从数据库中动态检索多行onchange下拉事件的值

我有一个不断添加行的按钮。每行中都有一个用于“活动”的下拉控件和用于“金额”的文本框。根据下拉列表中选择的值，我需要使用jQueryAjax调用从数据库中检索金额。通过单击“添加”按钮动态添加下拉列表

例子： 在第一行中，我选择了一项活动。我需要第一个文本框中与该活动相关的金额

同样，在第二行中，我选择了一项活动。我需要第二个文本框中与该活动相关的金额

如何在javascript或jQuery的帮助下实现这一点？请帮忙

提前谢谢

代码 }

我的控制器代码

---

将一个新的css类

myActivity

添加到您的activity下拉列表元素中，以便我们以后可以将其用作jQuery选择器。还要将HTML5数据属性中的wpid值设置为表行。我们还需要为amount文本框设置一个css类

myAmt

，以便以后访问它

因为您使用的是jQuery，所以可以使用一些jQuery速记方法来构建html表行。此外，我还从HTML标记中删除了所有事件。我们可以以一种不引人注目的方式做到这一点，这将保持标记的干净，并提供一些独立的关注点

function addWPActivity() { 

   var r =$("<tr />").attr('data-wpid',wpid);

   r.append('<td><select class = "myPrgram form-control" id="SelectedWorkProgram' + wpid + '"><option>-Select -</option></select></td>');
   r.append('<td><select class ="form-control myActivity" id="SelectedActivity' + wpid + '" ><option>-Select-</option></select></td>');
   r.append('<td><input type="text" class="myAmt form-control" id="wpAmount' + wpid + '/></td>');        

   $("#wpTable").append(r);
   wpid++;
}

    function OnActivitySelect(obj) {
    var block = $("#BlockSelect option:selected").text();

    var activ = obj.value;
    var ID = {
        id: activ
    };
    jQuery.ajax({
        method: "POST",
        url: '@Url.Action("GetBudgetByWPAID", "Payments")',
    data: ID,
    success: function (data) {
        if (data != null) {

            var budg = data;
           // $("wpAmount").val = data;
            document.getElementById("wpAmount").value = data;
        }
        //$("#wpAmount1").focusout(function () {
        //    var amou = document.getElementById("wpAmount1").value;
        //    var due = (amou - budg);
        //    document.getElementById("due1").value = due;
        //});
    }
});

    [HttpPost]
    [Authorize]
    public double GetBudgetbywpaID(long id)
    {
        double wpabudget = function.GetBudgetByWPAID(id);

        return wpabudget;
    }

function addWPActivity() { 

   var r =$("<tr />").attr('data-wpid',wpid);

   r.append('<td><select class = "myPrgram form-control" id="SelectedWorkProgram' + wpid + '"><option>-Select -</option></select></td>');
   r.append('<td><select class ="form-control myActivity" id="SelectedActivity' + wpid + '" ><option>-Select-</option></select></td>');
   r.append('<td><input type="text" class="myAmt form-control" id="wpAmount' + wpid + '/></td>');        

   $("#wpTable").append(r);
   wpid++;
}

$(function(){

  $(document).on("change",".myActivity",function(e){

     var _this=$(this);
     var wpid =_this.attr('data-wpid');
     var url = '@Url.Action("GetBudgetByWPAID", "Payments")',
     url = url +"?id="+wpid ;
     var amountTxt=_this.closest("tr").find("input.myAmt");
     $.post(url,function(result){
         //Set the value to the amount textbox.
      amountTxt.val(result);

     });

  });
  $(document).on("change",".myPrgram",function(e){

     alert('programchanged');
     var _this=$(this);
     var parentTr=_this.closest("tr");
     // You can do whatever you want here. 

  });

  $(document).on("change",".myAmt",function(e){

     alert('amount changed');
     var _this=$(this);
     var parentTr=_this.closest("tr");
     // You can do whatever you want here. 

  });
});