更改下拉列表后结果不更新 Javascript

Question

如果您运行代码段，请尝试在设备价格中添加省份和价值。（这按预期工作）但是在这样做之后，您再次更改省份，它不会更新。我怎样才能做到这一点？

基本上，我想做的是，每当您更改某些内容时，它应该自动更新 6 个月和 12 个月的框。

var province = [ '5.00','12.00','12.00','15.00','15.00','5.00','15.00','5.00','13.00','15.00','14.975','11.00','5.00'];

$('#paybright').change(function(paycalc){
    var o = parseInt($(this).val()) < 14 ? $(this).val()-1 : 2;
    $('#paytax').val(province[o]).addClass('hidden');
});

$('#paytax, #paybprice').on('input', function paycalc(){
  const paytax = Number(document.getElementById("paytax").value);
  const paybprice = Number(document.getElementById("paybprice").value);
  const sixmos = (document.getElementById("sixmos"));
  const twemos = (document.getElementById("twemos"));

  if (paybprice < 300) {
    $('#sixmos').val("N/A");
    $('#twemos').val("N/A");
  }else{
    $('#sixmos').val("$" + ((paybprice * (1 + paytax / 100) + (6 * 3.95)) / 6).toFixed(2) + " / month");
    $('#twemos').val("$" + ((paybprice * (1 + paytax / 100) + (12 * 3.95)) / 12).toFixed(2) + " / month");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="content-input" name="paybright" id="paybright" style="width:350px;" onchange="changecat(this.value);">
  <option value="" disabled selected>Select Province</option>
  <option value="1">Alberta</option>
  <option value="2">British Columbia</option>
  <option value="3">Manitoba</option>
  <option value="4">New Brunswick</option>
  <option value="5">Newfoundland and Labrador</option>
  <option value="6">Northwest Territories</option>
  <option value="7">Nova Scotia</option>
  <option value="8">Nunavut</option>
  <option value="9">Ontario</option>
  <option value="10">Prince Edward Island</option>
  <option value="11">Quebec</option>
  <option value="12">Saskatchewan</option>
  <option value="13">Yukon</option>
</select>
<div class="content-label inputIconBg">
  <input class="content-input" type="text" name="paytax" id="paytax" placeholder="Tax Percentage" style="width:350px;" onchange="populateTax(this.value);" readonly/>
  <i class="fas fa-percent" id="paytax1" data-toggle="tooltip" title="Tax" data-placement="left"></i>
</div>

<div class="content-label inputIconBg" id="payprice">
  <input class="content-input" type="number" id="paybprice" placeholder="Device Price" style="width:350px;" />
  <i class="fas fa-dollar-sign" id="paydollar" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>

<div class="col-sm-12 col-md ">
  <label for="sixmos" class="moneyLabel">6 Months</label>
  <input type="text" id="sixmos" class="form-control" name="sixmos" value="0" style="width:350px;" readonly />
</div>

<div class="col-sm-12 col-md ">
  <label for="twemos" class="moneyLabel">12 Months</label>
  <input type="text" id="twemos" class="form-control" name="twemos" value="0" style="width:350px;" readonly />
</div>

Answer 1

在 select 更改后触发输入 $('#paytax, #paybprice').trigger("input")：

$('#paybright').change(function(paycalc) {
  var o = parseInt($(this).val()) < 14 ? $(this).val() - 1 : 2;
  $('#paytax').val(province[o]).addClass('hidden');
$('#paytax, #paybprice').trigger("input") 
});

var province = ['5.00', '12.00', '12.00', '15.00', '15.00', '5.00', '15.00', '5.00', '13.00', '15.00', '14.975', '11.00', '5.00'];

$('#paybright').change(function(paycalc) {
  var o = parseInt($(this).val()) < 14 ? $(this).val() - 1 : 2;
  $('#paytax').val(province[o]).addClass('hidden');
$('#paytax, #paybprice').trigger("input") 
});

$('#paytax, #paybprice').on('input', function paycalc() {
  const paytax = Number(document.getElementById("paytax").value);
  const paybprice = Number(document.getElementById("paybprice").value);
  const sixmos = (document.getElementById("sixmos"));
  const twemos = (document.getElementById("twemos"));

  if (paybprice < 300) {
    $('#sixmos').val("N/A");
    $('#twemos').val("N/A");
  } else {
    $('#sixmos').val("$" + ((paybprice * (1 + paytax / 100) + (6 * 3.95)) / 6).toFixed(2) + " / month");
    $('#twemos').val("$" + ((paybprice * (1 + paytax / 100) + (12 * 3.95)) / 12).toFixed(2) + " / month");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="content-input" name="paybright" id="paybright" style="width:350px;" >
  <option value="" disabled selected>Select Province</option>
  <option value="1">Alberta</option>
  <option value="2">British Columbia</option>
  <option value="3">Manitoba</option>
  <option value="4">New Brunswick</option>
  <option value="5">Newfoundland and Labrador</option>
  <option value="6">Northwest Territories</option>
  <option value="7">Nova Scotia</option>
  <option value="8">Nunavut</option>
  <option value="9">Ontario</option>
  <option value="10">Prince Edward Island</option>
  <option value="11">Quebec</option>
  <option value="12">Saskatchewan</option>
  <option value="13">Yukon</option>
</select>
<div class="content-label inputIconBg">
  <input class="content-input" type="text" name="paytax" id="paytax" placeholder="Tax Percentage" style="width:350px;" onchange="populateTax(this.value);" readonly/>
  <i class="fas fa-percent" id="paytax1" data-toggle="tooltip" title="Tax" data-placement="left"></i>
</div>

<div class="content-label inputIconBg" id="payprice">
  <input class="content-input" type="number" id="paybprice" placeholder="Device Price" style="width:350px;" />
  <i class="fas fa-dollar-sign" id="paydollar" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>

<div class="col-sm-12 col-md ">
  <label for="sixmos" class="moneyLabel">6 Months</label>
  <input type="text" id="sixmos" class="form-control" name="sixmos" value="0" style="width:350px;" readonly />
</div>

<div class="col-sm-12 col-md ">
  <label for="twemos" class="moneyLabel">12 Months</label>
  <input type="text" id="twemos" class="form-control" name="twemos" value="0" style="width:350px;" readonly />
</div>

更改下拉列表后结果不更新 Javascript

Results Doesn't Update After Changing Dropdown Javascript

javascript

jquery

dropdown