如何動態獲取和添加兩個選擇值？

我有兩個選擇框，我得到了我的選擇的價值，但我想補充我的兩個互相選擇（基本數學運算），可能我可以處理它只有一個功能我使用兩個函數.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; 
 
}

<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>

來源

2017-02-02 ani_css

您可以處理這一切在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); 
}

演示：使用JQuery3210 https://jsfiddle.net/2jpxd9k7/1/

來源

2017-02-02 08:18:28 Pimmol

解析字符串值整數，然後進行簡單的addition.Replace您的JavaScript代碼，並嘗試this.Hope這對您有所幫助。

$(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)); 
     }); 
    });

來源

2017-02-02 08:04:03

你拍m對它來說，這是我的確切實施。 – localplutonium

解析字符串值整數，然後執行簡單的加法如選擇框選擇的值返回字符串

$(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>

來源

2017-02-02 08:06:43 kritikaTalwar

$(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>

來源

2017-02-02 08:13:33 dann

$(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>

來源

2017-02-02 08:13:50 Weedoze

這裏是做這件事的另一種簡單的方法。

$(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>

來源

2017-02-02 08:16:25 Pugazh

類似我的答案，但沒有增加新的類 – dann

@dann：哦，我沒注意到！ – Pugazh

簡短的解決方案功能：

$("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>

來源

2017-02-02 08:24:20 RomanPerekhrest

如何動態獲取和添加兩個選擇值？

回答

相關問題