從選擇框中獲得價值並通過jQuery添加到總數中

Question

我已經設法啓動並運行了這段代碼，它簡單地計算了基於它的大小來清理房屋的總價格。現在我想添加第二個選項：選擇所需的時間，但我不知道如何繼續並連接兩個不同的表單元素。

這是我的代碼看起來像現在：

$(document).ready(function(){ 

    $("#order").on('input', function(){ 
     var kvm2 = parseInt($('#kvm2').val()) || 0; 
     var min_price = 299; 
     var kvm2_price; 
     if(kvm2 > 100) { 
      kvm2_price = 6; 
     } 
     if(kvm2 > 200) { 
      kvm2_price = 4; 
     }  
     if(kvm2 <= 100) { 
      kvm2_price = 7; 
     } 
     var total = (kvm2_price * kvm2).toFixed(2); 
     if(total < min_price) { 
      $('#total').html(min_price); 
     } 
     else { 
      $('#total').html(total); 
     } 
    }); 
}); 

這是選擇框我想補充：

<select name="timeslot" class="form-control form-control-lg"> 
    <option value="1">Dagtid (08 - 15) 0kr</option> 
    <option value="2">Formiddag (12 - 15) 39kr</option> 
    <option value="3">Ettermiddag (16 - 18) 39kr</option> 
    <option value="4">Kveld (19 - 24) 129kr</option> 
    </select> 

根據您選擇的選項，可以0kr，39kr或129kr應該加在總銷售價格之上。

Answer 1

將total聲明爲全局變量，然後將其添加到第二個函數中，並更新元素中的值。爲了簡單起見，下面的代碼只是給出了一個初始值，就好像你的第一個函數已經運行了一樣。然後，選擇一個時間段，並添加附加費用並顯示在total元素中。注意 - 您需要將總變量保留爲第一個函數的輸出，否則如果用戶多次更改時間選項，則總數將繼續增加。

var total = 100; 
 
    /*$("#order").on('input', function() { 
 
    var kvm2 = parseInt($('#kvm2').val()) || 0; 
 
    var min_price = 299; 
 
    var kvm2_price; 
 
    if (kvm2 > 100) { 
 
     kvm2_price = 6; 
 
    } 
 
    if (kvm2 > 200) { 
 
     kvm2_price = 4; 
 
    } 
 
    if (kvm2 <= 100) { 
 
     kvm2_price = 7; 
 
    } 
 
    total = (kvm2_price * kvm2).toFixed(2); 
 
    if (total < min_price) { 
 
     $('#total').html(min_price); 
 
    } else { 
 
     $('#total').html(total); 
 
    } 
 
    });*/ 
 

 

 
    $('#timeslot').on('change', function() { 
 
    extra = $(this).val(); 
 
    switch (extra) { 
 
     case '1': 
 
     add = 0; 
 
     break; 
 
     case '2': 
 
     case '3': 
 
     add = 39; 
 
     break; 
 
     case '4': 
 
     add = 129; 
 
     break; 
 
    } 
 
    total2 = total + add; 
 
    console.log(total2); 
 
    $('#total').html(total2); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="timeslot" class="form-control form-control-lg"> 
 
    <option disabled selected>Select Time</option> 
 
    <option value="1">Dagtid (08 - 15) 0kr</option> 
 
    <option value="2">Formiddag (12 - 15) 39kr</option> 
 
    <option value="3">Ettermiddag (16 - 18) 39kr</option> 
 
    <option value="4">Kveld (19 - 24) 129kr</option> 
 
    </select> 
 
<br> 
 
<div id="total">100</div>

Answer 2

在這裏，你去與的jsfiddle https://jsfiddle.net/5orednbn/

**HTML** 
<div id="subTotal">SubTotal: <span>200</span></div> 
<select name="timeslot" class="form-control form-control-lg"> 
    <option value="0">Dagtid (08 - 15) 0kr</option> 
    <option value="39">Formiddag (12 - 15) 39kr</option> 
    <option value="39">Ettermiddag (16 - 18) 39kr</option> 
    <option value="129">Kveld (19 - 24) 129kr</option> 
</select> 

<button type="button" id="order" value="submit" >Submit</button> 

<div id="grandTotal">Total: <span></span></div> 


**JS** 
$("#order").on('click', function(){ 
    var subtotal = parseFloat($('#subTotal > span').text()); 
    var timeSlot = parseFloat($('select[name="timeslot"] option:selected').val()); 

    $('#grandTotal > span').html(subtotal + timeSlot); 
});