堆棧內存溢出
  簡體   English   中英

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

[英]How to get and addition two select value dynamically?

 原文  2017-02-02 07:57:35  4   7    javascript/ jquery

問題描述

我有兩個選擇框，但我獲得了選擇的價值，但我想將兩個選擇相互加法（基本數學運算），也許我可以只用一個函數來處理它，所以我對.person-1和.person-2兩個函數使用兩個函數.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 個解決方案

解決方案1
 2  2017-02-02 08:04:03

將字符串值解析為整數，然后執行簡單的加法操作。替換您的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));
        });
    });

解決方案2
 2  2017-02-02 08: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>

解決方案3
 2  2017-02-02 08:16:25

這是另一種簡單的方法。 

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

解決方案4
 1  2017-02-02 08:06:43

將字符串值解析為整數，然后執行簡單加法，作為選擇框選擇值返回字符串 

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

解決方案5
 1  2017-02-02 08:13:50

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

解決方案6
 1 已采納  2017-02-02 08:18:28

您可以在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/

解決方案7
 1  2017-02-02 08:24:20

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何動態獲取選擇標記的值？ 如何獲得所有輸入值並進行加法運算 如何 select 並獲得兩個輸入值？ 動態獲取更改的選擇值 獲取動態創建的 select 的值 如何使用提示將值動態添加到選擇菜單中 如何從動態生成的選擇選項中獲得價值？ 如何從動態生成中獲取價值<option><select>快遞ejs 如何使用MaterializeCss從多選中動態獲取選定值 動態添加通過json創建的選擇項
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM