動態將SELECT OPTION中的值添加和/或減去到現有的INPUT值

Question

我有一個<input readonly>字段，其中包含一個<?php echo $row['val'];?>值，該值是購物車的total_price。 我也有一個<select>帶有運輸類型的選項，它的值可以向total_price添加或減去更多的錢

Choose transport type:

<select id="transport">
    <option value="0">Pick Up (costs 0$)</option>
    <option value="5">UPS (costs 5$)</option>
</select>

<h3> Total: </h3>
<input id="totalprice" type="text" value="<?php echo $row['total_sum'];?>" readonly> $

我想做的是，當我選擇“ UPS（成本5 $）”並且總價格輸入值為50時，它顯示55 $，然后如果我選擇“提貨（成本0 $）”，則它再次顯示50 。

有沒有辦法用javascript做到這一點？ 我在StackOverflow中搜索了一個答案，但類似的問題不是我所需要的，我想與輸入值進行交互 ，而不僅僅是在<input>顯示option.value。 謝謝！

Answer 1

未經測試，但應該可以。 嘗試這個：

var totalPrice = parseInt($('#totalprice').val());
$('#transport').change(function(){
    var dynamicPrice = totalPrice;
    if(parseInt($(this).val()) != 0){
       var newValue = dynamicPrice + parseInt($(this).val());
       $('#totalprice').val(newValue);
    }else{
       $('#totalprice').val(totalPrice);
    }
});