Ajax 调用仅适用于表的第一行，不适用于下一行

Question

在我看来，我正在显示一个表格，并且在表格中我强类型化了下拉列表，当您更改所选项目时，它通过 ajax 调用调用 getPrice(int product_id) 函数并返回所选项目的价格，但它仅适用于第一行.

HTML

 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"}
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"})
     </td>
     <td class="product_price" id="product_price1" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "")</td></tr>

Ajax 调用

 $(function () {
        $('#product_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product_id').val() },
                success: function (data) {
                    document.getElementById('product_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product_price').innerText = 0;
                    multiply();
                }
            });
        });
    });

Answer 1

html

   @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel", @onchange = "gg(this)" })

ajax 调用

 <script>
    function gg(x) {
        $.ajax({
            type: "POST",
            url: "/Home/GetPrice // GetPrice is name of actionmathod of controller",
            datatype: "Json",
            data: { product_id: $(x).val() },
            success: function (data) {
                //your code here
            },
            error: function () {
                // your code here
            }
        });
    }
</script>

Answer 2

您需要为每个下拉菜单设置 2 个不同的 ID。

    @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @id = "ddl_product_id_1", @class = "form-control sel"}

@Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @id = "ddl_product_id_2", @class = "form-control sel"})

并写入该下拉ID的个人的更改事件。

Answer 3

由于您选择 2 个不同的产品，您的模型应该有 2 个 id 属性 - product1_id 和 product2_id 和 2 个价格属性 - product1_price 和 product2_price

所以相应地修正你的观点

 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"}
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product1_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"})
     </td>
     <td class="product_price" id="product2_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product2_price, "", "")</td></tr>

你也应该 2 分开改变

$(function () {

        $('#product1_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product1_id').val() },
                success: function (data) {
                    document.getElementById('product1_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product1_price').innerText = 0;
                    multiply();
                }
            });
        });
   $('#product2_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product2_id').val() },
                success: function (data) {
                    document.getElementById('product2_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product2_price').innerText = 0;
                    multiply();
                }
            });
        });
    });