En mi opinión, estoy mostrando una tabla y en la tabla escribí fuertemente la lista desplegable y, a medida que cambia el elemento seleccionado, llama a la función getPrice (int product_id) a través de una llamada ajax y devuelve el precio del elemento seleccionado, pero solo funciona para la primera fila.
<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> $(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(); } }); }); }); @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel", @onchange = "gg(this)" }) <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>Debe establecer 2 ID diferentes para cada menú desplegable.
@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"})Y escriba el evento de cambio del individuo que identifica el menú desplegable.
Dado que está seleccionando 2 productos diferentes, su modelo debe tener 2 propiedades de id: product1_id y product2_id y 2 propiedades de precio: product1_price y product2_price
Así que arregla tu vista en consecuencia
<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>y deberías separarte en el cambio también
$(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(); } }); }); });