javascript - 如何使用 Jquery 进行计算并将其输出为 html？

Question

我想使用 javascript 计算百分比。

如果 place1 和 place2 中的所选值不相等，则计算应显示在 flvalue 和 flvalues 中。

例如:如果值为 1000，所选百分比为 10，所选 place1 和 place2 值相等，则 flvalue 应为 1100。

如果值是 1000，选择的百分比是 10，选择的 place1 和 place2 值不相等，那么 flvalue 应该是 1100，flvalues 应该是 1100。

<script>
$('#percent,#input,#place,#places').on('change input', function() {
  var val = Number($('#input').val()) || 0,
    per = Number($('#percent').val()) || 0;

 if($('#place').val()!=$('#places')){
  $('#total').val(val + val * per / 100)
  $('#totals').val(val + val * per / 100)
})
</script>

Value    
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
    <select name="percent" id="percent" class="input">
      <option value="Country" selected>Select Percentage</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="15">15</option>
    </select>

Place_1
<select name="place_1" id="place_1" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

Place_2
<select name="place_2" id="place_2" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

    Final Value
    <input type="text" name="flvalue" class="input" id="total" required/>
    <input type="text" name="flvalues" class="input" id="totals" required/>

Answer 1

试试这个，

$('#percent,#input,#place_2,#place_1').on('change input', function() {
     var val = Number($('#input').val()) || 0,
     per = Number($('#percent').val()) || 0;
     var tot_am = val + val * per / 100;
     if ($('#place_1').val() != $('#place_2').val()) {
      $('#total').val(tot_am);
      $('#totals').val(tot_am);
     } else if ($('#place_1').val() == $('#place_2').val()) {
      $('#total').val()
      $('#totals').val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Value    
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
    <select name="percent" id="percent" class="input">
      <option value="Country" selected>Select Percentage</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="15">15</option>
    </select>

Place_1
<select name="place_1" id="place_1" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

Place_2
<select name="place_2" id="place_2" class="input">
  <option value="Place" selected>Place</option>
  <option value="Place 1">Place 1</option>
  <option value="Place 2">Place 2</option>
  <option value="Place 3">Place 3</option>
</select>

    Final Value
    <input type="text" name="flvalue" class="input" id="total" required/>
    <input type="text" name="flvalues" class="input" id="totals" required/>

希望这能解决您的问题。