我想知道是否有可能將兩個(gè)不同的選擇組合起來并匯總到下面顯示？我已經(jīng)在每個(gè)選擇上插入了計(jì)算。當(dāng)用戶選擇QTY將自動匯總并顯示在“總計(jì)按鈕”上，但我設(shè)法只顯示一個(gè) selection.is 是否有可能匯總兩個(gè)不同的選擇并在按鈕上顯示總計(jì)？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>如何從總計(jì)中獲取值或文本？
4 回答
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
試試這個(gè)，只需在按鈕中添加span標(biāo)簽，添加你的值并更新它。
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貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
只需獲取兩個(gè)下拉列表的值，計(jì)算每個(gè)下拉列表的價(jià)格，將它們相加并顯示它們。您可以組合選擇器，為兩個(gè)下拉列表運(yùn)行相同的代碼。
$(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>
如果你想要一個(gè)更通用的解決方案，你可以給所有的下拉列表一個(gè)類，把價(jià)格放在一個(gè)屬性中，然后使用一個(gè)循環(huán)。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貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以通過這種簡單的方式實(shí)現(xiàn)它
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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
試試這個(gè)
<!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允許我們指定任意數(shù)量的選擇器以組合成單個(gè)結(jié)果。這種多表達(dá)式組合器是選擇不同元素的有效方法。此外，parseInt（） 函數(shù)分析字符串參數(shù)并返回指定基數(shù)的整數(shù)。
- 4 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消