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

我想使用JavaScript计算百分比。

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

例如:如果值是1000，选定的百分比是10，并且选定的place1和place2值相等，则flvalue应该是1100。

如果值是1000，选择的百分比是10，并且选择的place1和place2的值是notequal，则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/>

最佳答案

尝试一下

$('#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/>

希望这能解决您的问题。