javascript - 将 SELECT OPTION 中的值动态添加和/或减去到现有 INPUT 值

Question

我有一个<input readonly>包含 <?php echo $row['val'];?> 的字段value 是购物车的total_price。我还有一个<select>可选择运输类型及其值(value)，可以为总价格增加或减少更多费用

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);
    }
});