我想知道是否有可能將兩個不同的選擇組合起來并匯總到下面顯示？我已經在每個選擇上插入了計算。當用戶選擇QTY將自動匯總并顯示在“總計按鈕”上，但我設法只顯示一個 selection.is 是否有可能匯總兩個不同的選擇并在按鈕上顯示總計？total button$(document).ready(function() { $("#meatroll").change(function() { var product = $(this).find(":selected").val(); event.preventDefault(); var x = parseInt($(".product").val()); var total1 = x * "7.50"; alert("Total:" + "$" + total1); $('.cow').html("Total:" + "$" + total1); });});$(document).ready(function() { $("#burger").change(function() { var product2 = $(this).find(":selected").val(); event.preventDefault(); var z = parseInt($(".product2").val()); var total2 = z * "1.20"; alert("Total:" + "$" + total2); $('.cow').html("Total:" + "$" + total2); });});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><label> <p> Burger...........QTY : <select id="burger" class="product2"> <option value="0">0</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select></P> </select> </P> </label><label><button class="cow">TOTAL :</button></label>如何從總計中獲取值或文本？
4 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
試試這個，只需在按鈕中添加span標簽，添加你的值并更新它。
JavaScript 代碼
$(document).ready(function(){
$("#meatroll").change(function(){
var product = $(this).val();
var x = parseInt($(".product").val());
var total1 = x * "7.50" ;
alert("Total:" +"$"+ total1);
addToTotal(total1);
});
$("#burger").change(function(){
var product2 = $(this).val();
var z = parseInt($(".product2").val());
var total2 = z * "1.20" ;
alert("Total:" +"$"+ total2);
addToTotal(total2);
});
function addToToal(t){
var total = parseInt($("#total").html);
$("#total").html(total+t);
}
});
代碼
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
<p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</P>
</label>
<label><button class="cow">TOTAL :<span id="total"></span></button></label>
慕妹3242003
TA貢獻1824條經驗 獲得超6個贊
只需獲取兩個下拉列表的值，計算每個下拉列表的價格，將它們相加并顯示它們。您可以組合選擇器，為兩個下拉列表運行相同的代碼。
$(document).ready(function() {
$("#meatroll, #burger").change(function() {
var meatroll = parseInt($("#meatroll").val());
var burger = parseInt($("#burger").val());
var total = meatroll * 7.50 + burger * 1.20;
var product = $(this).find(":selected").val();
alert("Total:" + "$" + total);
$('.cow').html("Total:" + "$" + total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
<p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</P>
</label>
<label><button class="cow">TOTAL :</button></label>
如果你想要一個更通用的解決方案，你可以給所有的下拉列表一個類，把價格放在一個屬性中，然后使用一個循環。data-price
$(document).ready(function() {
$(".product").change(function() {
var total = 0;
$(".product").each(function() {
var quantity = $(this).val();
var price = $(this).data("price");
total += quantity * price;
});
alert("Total:" + "$" + total);
$('.cow').html("Total:" + "$" + total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
<p> Burger...........QTY :
<select id="burger" class="product" data-price="1.20">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product" data-price="7.50">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</P>
</label>
<label><button class="cow">TOTAL :</button></label>
MMMHUHU
TA貢獻1834條經驗 獲得超8個贊
您可以通過這種簡單的方式實現它
var sumTotal = function(){
var totalProduct = parseInt($("#meatroll").find(":selected").val()) * 7.50;
var totalProduct2 = parseInt($("#burger").find(":selected").val()) * 1.2;
$('.cow').html("Total:" +"$"+ (totalProduct + totalProduct2));
};
$(document).ready(function(){
$(".qty").change(function(){
event.preventDefault();
sumTotal();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<p> Burger...........QTY :
<select id="burger" class="product2 qty">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product qty">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</P>
</label>
<label><button class="cow">TOTAL :</button></label>
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
試試這個
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#meatroll, #burger").change(function() {
var total = (parseInt($("#meatroll").val(), 10) * 7.50 )+ (parseInt($("#burger").val(), 10) * 1.20);
$('.cow').html("Total: " + "$" + total );
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<label>
<p> Burger...........QTY :
<select id="burger" class="product2">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select></P>
<p> Meat Roll...... QTY:
<select id="meatroll" class="product">
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</P>
</label>
<label><button class="cow">TOTAL :</button></label>
</body>
</html>
Jquery允許我們指定任意數量的選擇器以組合成單個結果。這種多表達式組合器是選擇不同元素的有效方法。此外，parseInt（） 函數分析字符串參數并返回指定基數的整數。
- 4 回答
- 0 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消