從文本框中獲取值取決於下拉菜單，然後添加值

我有以下代碼。我不知道我錯了什麼。它所做的是，一個值將顯示在文本框中，具體取決於下拉列表中的選定選項。然後，兩個文本框中的值將被添加。其答案將顯示在第三個文本框中。文本框中顯示的值完全正在運行，唯一的問題是它不會添加，並且不會顯示在第三個文本框中。從文本框中獲取值取決於下拉菜單，然後添加值

<select id="Dropdown1"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="c">C</option> 
</select> 

<select id="Dropdown2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<input type="text" id="txt1"/> 
<input type="text" id="txt2"/> 
<input type="text" id="total"/>

jQuery的

$(document).ready(function(){ 
    $("#Dropdown1").change(function(){ 
     if($(event.target).val() == 'A'){ 
      $("#Dropdown2").change(function(){ 
       if($(event.target).val() == '1'){ 
        $('#txt1').val('10.00'); 
        $('#txt2').val('15.00'); 
       }else if($(event.target).val() == '2'){ 
        $('#txt1').val('45.00'); 
        $('#txt2').val('23.00'); 
       }else { 
        $('#txt1').val('30.00'); 
        $('#txt2').val('53.00'); 
       } 
       if($(event.target).val() == 'B'){ 
        $("#Dropdown2").change(function(){ 
         if($(event.target).val() == '1'){ 
          $('#txt1').val('11.00'); 
          $('#txt2').val('17.00'); 
         }else if($(event.target).val() == '2'){ 
          $('#txt1').val('23.76'); 
          $('#txt2').val('46.00'); 
         }else { 
          $('#txt1').val('33.00'); 
          $('#txt2').val('53.76'); 
         } 
         if($(event.target).val() == 'C'){ 
          $("#Dropdown2").change(function(){ 
           if($(event.target).val() == '1'){ 
            $('#txt1').val('20.00'); 
            $('#txt2').val('17.00'); 
           }else if($(event.target).val() == '2'){ 
            $('#txt1').val('23.76'); 
            $('#txt2').val('40.00'); 
           }else { 
            $('#txt1').val('37.00'); 
            $('#txt2').val('43.76'); 
           } 
          });

的JavaScript

function subtotal(){ 
    var a = document.getElementById("txt1").value; 
    var b = document.getElementById("txt2").value; 

    var stotal = parseInt(a)+ parseInt(b); 
    document.getElementById("total").innerHTML = "$" + stotal; 
}

來源

2014-12-08 Jennifer

＃Dropdown2應該是＃Dropdown12按你的HTML。 – 2014-12-08 09:13:09

對不起。已經編輯它。 – Jennifer 2014-12-08 09:44:50

嘗試發佈答案。 – 2014-12-08 09:46:02

你說你要在第三文本框來顯示它所以你要設置其value屬性，或者val使用jQuery。

另外它可能值得告訴你，你必須使用parseInt的radix部分。在你的情況下，它應該是10，我想如果你肯定得到一個數字，你可以很好地使用Number(a)或+a，它會將其轉換爲數字。

$('#total').val("$" + stotal);

來源

2014-12-08 09:03:34

嘗試的

$('#total').val('$' + stotal);

代替

document.getElementById("total").innerHTML = "$" + stotal;

...和你在哪裏調用小計（）函數？......我看不出來。應該在每次選擇更改時調用它，在'更改'偵聽器中（您可以使用.on()函數）。我認爲（不是一個真正的pb，但較少可讀），你不應該混合DOM API（getElementById（...））和jQuery（$（'＃...'））。

爲了擺脫條件限制，你可以在你的「選項」的值屬性上使用你的數字值，並省掉很多if（）{} else {}或使用data-xxx屬性。

來源

2014-12-08 09:04:43 Flo

這裏工作FIDDLE。

太多eventlisteners和一些邏輯錯誤。

新的jQuery代碼：

$("#Dropdown1, #Dropdown2").change(function(){ 
    if($("#Dropdown1").val() == 'A'){ 
      if($('#Dropdown2').val() == '1'){ 
       $('#txt1').val('10.00'); 
       $('#txt2').val('15.00'); 
      }else if($('#Dropdown2').val() == '2'){ 
       $('#txt1').val('45.00'); 
       $('#txt2').val('23.00'); 
      }else { 
       $('#txt1').val('30.00'); 
       $('#txt2').val('53.00'); 
      } 
    } 
    if($("#Dropdown1").val() == 'B'){ 
      if($('#Dropdown2').val() == '1'){ 
       $('#txt1').val('11.00'); 
       $('#txt2').val('17.00'); 
      }else if($('#Dropdown2').val() == '2'){ 
       $('#txt1').val('23.76'); 
       $('#txt2').val('46.00'); 
      }else { 
       $('#txt1').val('33.00'); 
       $('#txt2').val('53.76'); 
      } 
    } 
    if($("#Dropdown1").val() == 'C'){ 
      if($('#Dropdown2').val() == '1'){ 
       $('#txt1').val('20.00'); 
       $('#txt2').val('17.00'); 
      }else if($('#Dropdown2').val() == '2'){ 
       $('#txt1').val('23.76'); 
       $('#txt2').val('40.00'); 
      }else { 
       $('#txt1').val('37.00'); 
       $('#txt2').val('43.76'); 
      } 
    } 
    subtotal(); 
});

編輯：

忘記了分類彙總功能：

function subtotal(){ 
    var a = document.getElementById("txt1").value; 
    var b = document.getElementById("txt2").value; 

    var stotal = parseInt(a)+ parseInt(b); 
    $('#total').val("$" + stotal); 
}

來源

2014-12-08 09:14:52

試試這個：

$(document).ready(function(){ 
 
\t $("#Dropdown1").change(function(event){ 
 
\t   if($(event.target).val() == 'A'){ 
 
\t    $("#Dropdown2").change(function(event1){ 
 
\t     if($(event1.target).val() == '1'){ 
 
\t      $('#txt1').val('10.00'); 
 
\t      $('#txt2').val('15.00'); 
 
\t     }else if($(event1.target).val() == '2'){ 
 
\t      $('#txt1').val('45.00'); 
 
\t      $('#txt2').val('23.00'); 
 
\t     }else { 
 
\t      $('#txt1').val('30.00'); 
 
\t      $('#txt2').val('53.00'); 
 
\t     } 
 
\t     subtotal(); 
 
\t    }); 
 
\t   } 
 
\t   if($(event.target).val() == 'B'){ 
 
\t    $("#Dropdown2").change(function(event1){ 
 
\t     if($(event1.target).val() == '1'){ 
 
\t      $('#txt1').val('11.00'); 
 
\t      $('#txt2').val('17.00'); 
 
\t     }else if($(event1.target).val() == '2'){ 
 
\t      $('#txt1').val('23.76'); 
 
\t      $('#txt2').val('46.00'); 
 
\t     }else { 
 
\t      $('#txt1').val('33.00'); 
 
\t      $('#txt2').val('53.76'); 
 
\t     } 
 
\t     subtotal(); 
 
\t    }); 
 
\t   } 
 
\t   if($(event.target).val() == 'C'){ 
 
\t    $("#Dropdown2").change(function(event1){ 
 
\t     if($(event1.target).val() == '1'){ 
 
\t      $('#txt1').val('20.00'); 
 
\t      $('#txt2').val('17.00'); 
 
\t     }else if($(event1.target).val() == '2'){ 
 
\t      $('#txt1').val('23.76'); 
 
\t      $('#txt2').val('40.00'); 
 
\t     }else { 
 
\t      $('#txt1').val('37.00'); 
 
\t      $('#txt2').val('43.76'); 
 
\t     } 
 
\t  }); 
 
\t    subtotal(); 
 
\t   } 
 

 
\t  
 
\t   }); 
 

 
\t 
 
}); 
 
function subtotal(){ 
 
\t var a = $("#txt1").val(); 
 
\t var b = $("#txt2").val(); 
 

 
\t var stotal = parseInt(a)+ parseInt(b); 
 
\t $('#total').val('$' + stotal); 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <select id="Dropdown1"> 
 
    <option >select</option> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="c">C</option> 
 
</select> 
 

 
<select id="Dropdown2"> 
 
    <option >select</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
<input type="text" id="txt1"/> 
 
<input type="text" id="txt2"/> 
 
<input type="text" id="total"/>

：

來源

2014-12-08 09:18:28

從文本框中獲取值取決於下拉菜單，然後添加值

回答

相關問題