Question

我有以下代码。我不知道我错了什么部分。它的作用是，一个值将显示在文本框中，具体取决于下拉列表中的选定选项。然后，将添加两个文本框中的值。它的答案将显示在第三个文本框中。文本框中值的显示完全正常运行，唯一的问题是它没有添加，并且它没有显示在第三个文本框中。

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

Answer 1

您说要在第三个文本框中显示它，因此您必须使用jQuery设置其value属性或val。

也值得告诉您，您必须使用radix的{{1}}部分。在你的情况下它应该是10，我想如果你确定得到一个数字，你可以使用parseInt或Number(a)将其转换为数字。

+a

Answer 2

尝试

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

而不是

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

...你在哪里调用subtotal（）函数？...我没有看到它。每次选择更改时都应该调用它，在您的“更改”中进行更改。听众（你可以使用.on()函数）。

此外，你不应该混合DOM API（getElementById（...））和jQuery（$（＆＃39;＃...＆＃39;））我认为（不是真的是pb，但是不太可读）。

为了摆脱你的条件，你可以在＆＃34;选项＆＃34;的值属性上使用你的数值，并节省很多if（）{} else {}，或者使用data-xxx属性。

Answer 3

这是一个有效的FIDDLE。

太多的事件恶习者和一些逻辑错误。

新的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);
}

Answer 4

试试这个：

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

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

从依赖于下拉菜单的文本框中获取值，然后添加值

4 个答案: