如何动态获取和添加两个选择值？

时间：2017-02-02 07:57:35

标签： javascript jquery

我有两个选择框，我得到了我的选择的值，但我想加上我的两个选择彼此（基本的数学运算），也许我可以用一个函数来处理它我使用两个函数{{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;
}

7 个答案:

答案 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选择值返回字符串

＆＃13;
＆＃13; 
$(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);
  });
});
＆＃13; 
select{
  width:150px;
  height:40px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 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);
}

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

答案 6 :(得分：1)

使用JQuery .each()函数的简短解决方案：

＆＃13;
＆＃13; 
$("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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题