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

how to retrieve the values from database for onchange event of dropdown for multiple rows dynamically

本文关键字：下拉列表 onchange 事件 检索 数据库 动态      更新时间：2023-09-26

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

示例：

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

类似地，在第二行中，我选择一个活动。我需要第二个文本框中与该活动相关的金额。

如何在javascript或jQuery的帮助下做到这一点？请帮忙。

提前谢谢。

代码

var wpid = 2;
function addWPActivity() {
    var table = document.getElementById("wpTable");
    rowCountWPTable = table.rows.length;
    var row = table.insertRow(rowCountWPTable);
    row.insertCell(0).innerHTML = '<select class = "form-control" id="SelectedWorkProgram' + wpid + '" onchange="OnWPChange(this)"><option>--Select Work Program--</option></select>';
    row.insertCell(1).innerHTML = '<select class = "form-control" id="SelectedActivity' + wpid + '" ><option>--Select Activity--</option></select>';
    row.insertCell(2).innerHTML = '<input type="text" class="form-control" id="wpAmount' + wpid + '" onchange="GetTotalAmount()"/>';
    GetValues();
    wpid++;
}

Ajax调用

    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;
    }

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

由于您使用的是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++;
}

现在收听下拉上的change事件

$(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. 
  });
});
相关文章：