如何使用 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

您只需在 selected 值的地方添加条件：

if($('#place').val()=="10"){
   $('#totals').val(val + val * per / 100);
}else{
   $('#totals').val('');
}

并将更改事件也添加到 #place select :

$('#percent,#input,#place').on('change input', function() {

希望这对您有所帮助。

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

  $('#total').val(val + val * per / 100);

  if($('#place').val()=="10"){
    $('#totals').val(val + val * per / 100);
  }else{
    $('#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/>
<br>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>
<br>
Place
<select name="place" id="place" class="input">
  <option value="Country" selected>Place</option>
  <option value="5">Place 1</option>
  <option value="10">Place 2</option>
  <option value="15">Place 3</option>
</select>
<br><br>
Final Value
<input type="text" name="flvalue" class="input" id="total" required/>
<input type="text" name="flvalues" class="input" id="totals" required/>

Answer 2

试试这个，

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

希望这能解决您的问题。

如何使用 Jquery 进行计算并在 html 中输出它们？

How can I do calculations using Jquery and output them in html?

html

javascript

jquery

onchange