admin管理员组

文章数量:1022944

I have two select box and I get value of my select but I want to addition my two select with each other (basic mathematical operation) and may be I can handle it with just one function I use two function for .person-1 and .person-2

$(document).ready(function(){
    $(".person-1").change(function(){
    var add_1 = $('option:selected',this).text();
      $(".addition-1").text(add_1);
  }); 
  $(".person-2").change(function(){
    var add_2 = $('option:selected',this).text();
      $(".addition-2").text(add_2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src=".1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

I have two select box and I get value of my select but I want to addition my two select with each other (basic mathematical operation) and may be I can handle it with just one function I use two function for .person-1 and .person-2

$(document).ready(function(){
    $(".person-1").change(function(){
    var add_1 = $('option:selected',this).text();
      $(".addition-1").text(add_1);
  }); 
  $(".person-2").change(function(){
    var add_2 = $('option:selected',this).text();
      $(".addition-2").text(add_2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

  • javascript
  • jquery
Share Improve this question asked Feb 2, 2017 at 7:57 ani_cssani_css 2,1263 gold badges33 silver badges77 bronze badges 0
Add a ment  | 

7 Answers 7

Reset to default 2

Parse string value to integer and then perform simple addition.Replace your javascript code and try this.Hope This Helpful to you.

$(document).ready(function() {
        var add_1=0;
        var add_2=0;
        $(".person-1").change(function() {
            add_1 = $('option:selected', this).text();
            $(".addition-1").text(add_1);
            $(".addition").text(parseInt(add_1)+parseInt(add_2));
        });
        $(".person-2").change(function() {
            add_2 = $('option:selected', this).text();
            $(".addition-2").text(add_2);
            $(".addition").text(parseInt(add_1)+parseInt(add_2));
        });
    });


$(document).ready(function(){
  $(".person-select").change(function(){
    var p1 = parseInt($(".person-1").val());
    var p2 = parseInt($(".person-2").val());
    $(".addition-1").text(p1);
    $(".addition-2").text(p2);
    $(".addition").text(p1+p2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-select person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-select person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

Here is another simple way of doing it.

$(document).ready(function() {

  $(".person-1, .person-2").change(function() {
    var val1 = parseInt($('.person-1').find(":selected").text()),
      val2 = parseInt($('.person-2').find(":selected").text());

    $(".addition-1").text(val1);
    $(".addition-2").text(val2);

    $(".addition").text(val1 + val2);

  });
});
select {
  width: 150px;
  height: 40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span>
  </p>
  <p>Add 2: <span class="addition-2"></span>
  </p>
  <p>Add 1+2 : <span class="addition"></span> 
  </p>

</body>

</html>

You can handle it all in 1 callback function. Simply pass the same function to the $(".person-1").change and $(".person-2").change.

In that callback function, get both the values, and populate the fields: 

function displayValues() {
  add_1 = parseInt($('.person-1').val(), 10);
  add_2 = parseInt($('.person-2').val(), 10);

  $(".addition-1").text(add_1);
  $(".addition-2").text(add_2);

  $(".addition").text(add_2 + add_1);
}

Demo: https://jsfiddle/2jpxd9k7/1/

Parse string value to integer and then perform simple addition as selectbox selected value return string 

$(document).ready(function(){
var add_1 =0;
var add_2=0; 
    $(".person-1").change(function(){
    add_1 = parseInt($('option:selected',this).text());
      $(".addition-1").text(add_1);
      $(".addition").text(add_2+add_1);
  }); 
  $(".person-2").change(function(){
    add_2 = parseInt($('option:selected',this).text());
      $(".addition-2").text(add_2);
       $(".addition").text(add_2+add_1);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

$(document).ready(function() {
  var add_1 = 0;
  var add_2 = 0;
  $(".person-1").change(function() {
    add_1 = +this.value;
    $(".addition-1").text(add_1);
    $(".addition").text(add_1+add_2);
  });
  $(".person-2").change(function() {
    add_2 = +this.value;
    $(".addition-2").text(add_2);
    $(".addition").text(add_1+add_2);
  });
});
select {
  width: 150px;
  height: 40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span>
  </p>
  <p>Add 2: <span class="addition-2"></span>
  </p>
  <p>Add 1+2 : <span class="addition"></span> 
  </p>

</body>

</html>

Short solution using JQuery .each() function:

$("select[class^='person-']").change(function(){
    var num = $(this).attr('class').match(/^person-(\d+)/)[1], sum = 0;
    $(".addition-" + num).text($(this).val());
    $("select[class^='person-'] option:selected").each(function(i, el){ 
        sum += Number($(el).val()); 
    });
    $(".addition").text(sum);
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>

I have two select box and I get value of my select but I want to addition my two select with each other (basic mathematical operation) and may be I can handle it with just one function I use two function for .person-1 and .person-2

$(document).ready(function(){
    $(".person-1").change(function(){
    var add_1 = $('option:selected',this).text();
      $(".addition-1").text(add_1);
  }); 
  $(".person-2").change(function(){
    var add_2 = $('option:selected',this).text();
      $(".addition-2").text(add_2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src=".1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

I have two select box and I get value of my select but I want to addition my two select with each other (basic mathematical operation) and may be I can handle it with just one function I use two function for .person-1 and .person-2

$(document).ready(function(){
    $(".person-1").change(function(){
    var add_1 = $('option:selected',this).text();
      $(".addition-1").text(add_1);
  }); 
  $(".person-2").change(function(){
    var add_2 = $('option:selected',this).text();
      $(".addition-2").text(add_2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

  • javascript
  • jquery
Share Improve this question asked Feb 2, 2017 at 7:57 ani_cssani_css 2,1263 gold badges33 silver badges77 bronze badges 0
Add a ment  | 

7 Answers 7

Reset to default 2

Parse string value to integer and then perform simple addition.Replace your javascript code and try this.Hope This Helpful to you.

$(document).ready(function() {
        var add_1=0;
        var add_2=0;
        $(".person-1").change(function() {
            add_1 = $('option:selected', this).text();
            $(".addition-1").text(add_1);
            $(".addition").text(parseInt(add_1)+parseInt(add_2));
        });
        $(".person-2").change(function() {
            add_2 = $('option:selected', this).text();
            $(".addition-2").text(add_2);
            $(".addition").text(parseInt(add_1)+parseInt(add_2));
        });
    });


$(document).ready(function(){
  $(".person-select").change(function(){
    var p1 = parseInt($(".person-1").val());
    var p2 = parseInt($(".person-2").val());
    $(".addition-1").text(p1);
    $(".addition-2").text(p2);
    $(".addition").text(p1+p2);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-select person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-select person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

Here is another simple way of doing it.

$(document).ready(function() {

  $(".person-1, .person-2").change(function() {
    var val1 = parseInt($('.person-1').find(":selected").text()),
      val2 = parseInt($('.person-2').find(":selected").text());

    $(".addition-1").text(val1);
    $(".addition-2").text(val2);

    $(".addition").text(val1 + val2);

  });
});
select {
  width: 150px;
  height: 40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span>
  </p>
  <p>Add 2: <span class="addition-2"></span>
  </p>
  <p>Add 1+2 : <span class="addition"></span> 
  </p>

</body>

</html>

You can handle it all in 1 callback function. Simply pass the same function to the $(".person-1").change and $(".person-2").change.

In that callback function, get both the values, and populate the fields: 

function displayValues() {
  add_1 = parseInt($('.person-1').val(), 10);
  add_2 = parseInt($('.person-2').val(), 10);

  $(".addition-1").text(add_1);
  $(".addition-2").text(add_2);

  $(".addition").text(add_2 + add_1);
}

Demo: https://jsfiddle/2jpxd9k7/1/

Parse string value to integer and then perform simple addition as selectbox selected value return string 

$(document).ready(function(){
var add_1 =0;
var add_2=0; 
    $(".person-1").change(function(){
    add_1 = parseInt($('option:selected',this).text());
      $(".addition-1").text(add_1);
      $(".addition").text(add_2+add_1);
  }); 
  $(".person-2").change(function(){
    add_2 = parseInt($('option:selected',this).text());
      $(".addition-2").text(add_2);
       $(".addition").text(add_2+add_1);
  });
});
select{
  width:150px;
  height:40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>
  
</body>
</html>

$(document).ready(function() {
  var add_1 = 0;
  var add_2 = 0;
  $(".person-1").change(function() {
    add_1 = +this.value;
    $(".addition-1").text(add_1);
    $(".addition").text(add_1+add_2);
  });
  $(".person-2").change(function() {
    add_2 = +this.value;
    $(".addition-2").text(add_2);
    $(".addition").text(add_1+add_2);
  });
});
select {
  width: 150px;
  height: 40px;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <p>Add 1: <span class="addition-1"></span>
  </p>
  <p>Add 2: <span class="addition-2"></span>
  </p>
  <p>Add 1+2 : <span class="addition"></span> 
  </p>

</body>

</html>

Short solution using JQuery .each() function:

$("select[class^='person-']").change(function(){
    var num = $(this).attr('class').match(/^person-(\d+)/)[1], sum = 0;
    $(".addition-" + num).text($(this).val());
    $("select[class^='person-'] option:selected").each(function(i, el){ 
        sum += Number($(el).val()); 
    });
    $(".addition").text(sum);
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Add 1+2 : <span class="addition"></span> </p>

本文标签： javascriptHow to get and addition two select value dynamicallyStack Overflow

版权声明：本文标题：javascript - How to get and addition two select value dynamically? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745593029a2157999.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。