从依赖于下拉菜单的文本框中获取值，然后添加值
Getting value from textboxes that depends on dropdown menu then adding the values
我有以下代码。我不知道我错了哪一部分。它的作用是，一个值将显示在文本框中，具体取决于下拉列表中的所选选项。然后，将添加两个文本框中的值。它的答案将显示在第三个文本框中。文本框中值的显示完美运行，唯一的问题是它没有添加并且没有显示在第三个文本框中。
<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;
}
你说你想在第三个文本框中显示它，所以你必须设置它的value属性，或者使用 jQuery val。
另外，可能值得告诉您的是，您必须使用parseInt的radix部分。在你的情况下，它应该是 10，我想，如果你确定得到一个数字，你可以很好地使用 Number(a) 或 +a 将其转换为数字。
$('#total').val("$" + stotal);
试试这个：
$(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"/>：
这里有一个工作的小提琴。
事件侦听器过多，一些逻辑错误。
新的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);
}
尝试
$('#total').val('$' + stotal);
而不是
document.getElementById("total").innerHTML = "$" + stotal;
。你在哪里调用小计（）函数?...我看不出来。每次选择更改时，都应该在"更改"侦听器中调用它（您可以使用 .on（） 函数代替）。
另外，您不应该混合使用DOM API（getElementById（...））和jQuery（$（'#...'））我认为（不是真正的pb，但可读性较差）。
为了摆脱你的条件，你可以在"选项"的值属性上使用你的数值，并节省很多 if（） {} else {}，或者使用 data-xxx 属性。
相关文章：
- 需要使用javascript获取输入文本，然后将其添加到句子中
- 如何获取所有选中复选框的所有值，然后将其提交到表单中
- 如何从单选按钮中获取多个值，然后将它们分配到单个变量中并在页面上显示
- 获取表中每行的一列的内容，然后循环访问每个内容
- 获取Div Width，然后更新Scope Variable
- 更新Redux状态&然后在同一实例中获取更新状态
- 如何获取XML值，然后使用javascript将它们输出到htm文件中
- 如何通过URL下载文件，然后获取其名称
- 使用 AJAX 获取 XML，然后将其解析为 JSON(无需服务器）
- 在javascript中获取 http.post，然后发送响应
- 获取当前URL，替换部分路径名，然后在空白选项卡中打开
- 通过getElementById获取id，然后设置值
- 如何从网站获取数据，然后显示在英特尔 XDK 页面中
- jQuery设置attr，然后获取attr
- 使用AJAX获取JSON数据，然后通过HTML上的ElementID输出数据
- 使用 jquery 从 php 获取数据，然后再次传递给 php
- AngularJS如何获取一个数组，该数组将数字添加到函数中的元素，然后用另一个函数分散其注意力
- Javascript open.window 获取字段值，然后将值插入父窗口
- Chrome扩展程序获取DOM文本并在弹出窗口中显示.html然后单击按钮
- PDO获取然后目标对象
