从3选择框计算

时间:2018-03-14 07:39:34

标签: jquery

我有3个选择框,我想要这个等式。 ((选择2 - 选择1)* 40000)+选择3

但它并没有很好地发挥作用:(

这是我的代码HTML / Jquery。

 <select name="select1">
     <option value="1">1</option>
     <option value="1">2</option>
     <option value="1">3</option>
     <option value="1">4</option>
     <option value="1">5</option>
 </select>

 <select name="select2">
     <option value="1">1</option>
     <option value="1">2</option>
     <option value="1">3</option>
     <option value="1">4</option>
     <option value="1">5</option>
 </select>

 <select name="select3">
     <option value="1">10000</option>
     <option value="1">20000</option>
     <option value="1">30000</option>
     <option value="1">40000</option>
     <option value="1">50000</option>
 </select>

 <label id="total"></label>

Jquery的

 $(document).ready(function() {

      $('select').on('change', function() {

        $('#total').text(

          ( ($('select[name=select2]').val() - $('select[name=select1]').val() ) * 40000 )
           + $('select[name=select3]').val() 
        );

      });

5 个答案:

答案 0 :(得分:2)

您似乎忘记更改value绑定的.val()属性。另外,我创建了一个函数来从名称中获取值并将其转换为int更容易。我添加了.trigger('change'),因此我们可以在页面加载时看到结果。

function valByNameToInt(name) {
  return parseInt($('select[name="' + name + '"]').val());
}

$('select').on('change', function() {
  $('#total').text(
    (valByNameToInt('select1') - valByNameToInt('select2')) * 40000 + valByNameToInt('select3')
  );

}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

 <select name="select2">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

 <select name="select3">
     <option value="10000">10000</option>
     <option value="20000">20000</option>
     <option value="30000">30000</option>
     <option value="40000">40000</option>
     <option value="50000">50000</option>
 </select>

 <label id="total"></label>

答案 1 :(得分:1)

$('select').on('change', function() {

      var res = (parseInt($('select[name=select2]').val()) -
          parseInt($('select[name=select1]').val()))        *
        40000
      parseInt($('select[name=select3]').val());


        $('#total').html(
          res

        );
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

<select name="select2">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

<select name="select3">
     <option value="10000">10000</option>
     <option value="20000">20000</option>
     <option value="30000">30000</option>
     <option value="40000">40000</option>
     <option value="50000">50000</option>
 </select>

<label id="total"></label>

你需要parseInt(或parseFloat)来获得数学结果,比如

parseInt(('select[name=select2]').val())

答案 2 :(得分:1)

您可以使用parseInt()函数

$(document).ready(function() {

  $('select').on('change', function() {

    $('#total').text(

      ( parseInt(($('select[name="select2"]').val()) - parseInt($('select[name="select1"]').val()) ) * 40000 )
       + parseInt($('select[name="select3"]').val()) 
    );

  });
});

不要忘记更改值属性中的值

<select name="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="select2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select name="select3">
    <option value="10000">10000</option>
    <option value="20000">20000</option>
    <option value="30000">30000</option>
    <option value="40000">40000</option>
    <option value="50000">50000</option>
</select>

Total: <label id="total">0</label>

答案 3 :(得分:1)

所有您的option值均为1.更改为获得所需的o / p

 $(document).ready(function() {

  $('select').on('change', function() {
		var a=parseInt( $('select[name=select1]').val());
		var b=parseInt( $('select[name=select2]').val());
		var c=parseInt( $('select[name=select3]').val());
		
		var total=((b-a)*4000)+c;
		
		$('#total').text(total);
  });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

 <select name="select2">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>

 <select name="select3">
     <option value="10000">10000</option>
     <option value="20000">20000</option>
     <option value="30000">30000</option>
     <option value="40000">40000</option>
     <option value="50000">50000</option>
 </select>

 <label id="total"></label>

答案 4 :(得分:0)

它应该使用parseInt方法,因为你是加法和减法,它们通常被解释为连接运算符而不是加法。

( parseInt($('select[name=select2]').val()) - parseInt($('select[name=select1]').val()) ) * 40000 ) + parseInt($('select[name=select3]').val())