如何动态获取和加法两个select值？
如何动态获取和加法两个select值？
提问于 2017-02-02 15:57:35
我有两个选择框，我得到了select的值，但是我想把我的两个select相加(基本的数学运算)，也许我可以用一个函数来处理它，我对.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>
回答 7
Stack Overflow用户
回答已采纳
发布于 2017-02-02 16:18:28
你可以在一个回调函数中处理所有的事情。只需将相同的函数传递给$(".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);
}Stack Overflow用户
发布于 2017-02-02 16:04:04
解析字符串值为整数，然后执行简单的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));
});
});Stack Overflow用户
发布于 2017-02-02 16:13:33
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41996889
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号