在我看來，我正在顯示一個表格，在表格中我強輸入了下拉串列，當您更改所選專案時，它會通過 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();
}
});
});
});
uj5u.com熱心網友回復：
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>
uj5u.com熱心網友回復：
您需要為每個下拉串列設定 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的個人更改事件。
uj5u.com熱心網友回復：
由于您選擇了 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();
}
});
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311573.html
標籤：javascript asp.net 阿贾克斯 asp.net-mvc