我有两个选择框，我得到了我的选择的值，但我想加上我的两个选择彼此（基本的数学运算），也许我可以用一个函数来处理它我使用两个函数{{1 }和.person-1
.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;
}
答案 0 :(得分：2)
将字符串值解析为整数，然后执行简单的添加。替换你的javascript代码并尝试这个。希望这对你有帮助。
$(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));
});
});
答案 1 :(得分：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.com/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>
答案 2 :(得分：2)
这是另一种简单的方法。
$(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.com/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>
答案 3 :(得分：1)
将字符串值解析为整数，然后执行简单添加作为selectbox选择值返回字符串
$(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.com/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>
答案 4 :(得分：1)
$(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.com/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>
答案 5 :(得分：1)
你可以在1个回调函数中处理它。
只需将相同的功能传递给
$(".person-1").change和$(".person-2").change。
在该回调函数中，获取两个值，并填充字段：
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);
}
答案 6 :(得分：1)
使用JQuery .each()函数的简短解决方案：
$("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.com/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>