我正在尝试使用html和JavaScript从下拉列表中选择值生成总数，我的代码正在运行。但是当我从下拉列表中更改我的选择时，我希望在每个下拉列表选项中更改总数。但它没有发生。 比如，如果我在税后收入中输入价值并且每两周选择一次下拉，那么总的变化。但是当我输入第二和第三个值并分别按月和每周设置时，它不会根据选择而改变。 哪里可能是问题？
<script>
function asum() {
var first = document.getElementById('a1').value;
if (document.getElementById('a1').value == "") {
var first = 0;
}
var second = document.getElementById('a2').value;
if (document.getElementById('a2').value == "") {
var second = 0;
}
var third = document.getElementById('a3').value;
if (document.getElementById('a3').value == "") {
var third = 0;
}
var forth = document.getElementById('fc4').value;
if (document.getElementById('fc4').value == "") {
var forth = 0;
}
var fifth = document.getElementById('fc5').value;
if (document.getElementById('fc5').value == "") {
var fifth = 0;
}
var aresult = parseInt(first) + parseInt(second) + parseInt(third);
//aduration1
if (document.getElementById('aduration3').value == "Monthly") {
var aweekly = parseInt((aresult * 12) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = aweekly;
}
}
if (document.getElementById('aduration3').value == "Fortnightly") {
var weekly = parseInt((aresult * 26) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = weekly;
}
}
if (document.getElementById('aduration3').value == "Weekly") {
if (!isNaN(aresult)) {
document.getElementById('a4').value = parseInt(aresult);
}
}
//aduration2
if (document.getElementById('aduration2').value == "Monthly") {
var aweekly = parseInt((aresult * 12) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = aweekly;
}
}
if (document.getElementById('aduration2').value == "Fortnightly") {
var weekly = parseInt((aresult * 26) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = weekly;
}
}
if (document.getElementById('aduration2').value == "Weekly") {
if (!isNaN(aresult)) {
document.getElementById('a4').value = parseInt(aresult);
}
}
//aduration3
if (document.getElementById('aduration3').value == "Monthly") {
var aweekly = parseInt((aresult * 12) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = aweekly;
}
}
if (document.getElementById('aduration3').value == "Fortnightly") {
var weekly = parseInt((aresult * 26) / 52);
if (!isNaN(aresult)) {
document.getElementById('a4').value = weekly;
}
}
if (document.getElementById('aduration3').value == "Weekly") {
if (!isNaN(aresult)) {
document.getElementById('a4').value = parseInt(aresult);
}
}
}
</script> <div>
<center>
<table cellpadding="5px" style="border: 1px solid !important; padding: 10px !important;width: 40% !important;">
<tr>
<td style="width: 25%;">
<label>After tax salary</label>
</td>
<td style="width: 20%;">
<input type="text" id="a1" placeholder="$" vlaue="0" onkeyup="asum();" />
</td>
<td style="width: 15%;">
<select id="aduration3" name="aduration3" onchange="asum();">
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
<option value="Weekly">Weekly</option>
</select>
</td>
<td style="width: 41%;">
</td>
</tr>
<tr>
<td>
<label>Net passive income</label>
</td>
<td>
<input type="text" id="a2" placeholder="$" onkeyup="asum();" />
</td>
<td>
<select id="aduration2" name="aduration2" onchange="asum();">
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
<option value="Weekly">Weekly</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
<label>Other income</label>
</td>
<td>
<input type="text" id="a3" placeholder="$" onkeyup="asum();" />
</td>
<td>
<select id="aduration1" name="aduration1" onchange="asum();">
<option value="Monthly">Monthly</option>
<option value="Fortnightly">Fortnightly</option>
<option value="Weekly">Weekly</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<input type="text" id="a4" placeholder="$" onclick="asum();" style="height: 30px !important; margin-top: 3px; margin-bottom: 3px;" />
</td>
<td>
<label><b style="font-size:16px;" onclick="asum();"><u>TOTAL WEEKLY INCOME</u></b>
<label>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<input type="phone" id="a5" placeholder="$" onclick="bsum();" onkeyup="bsum();" style="height:30px !important;" />
</td>
<td>
<label><b style="font-size:16px;" onclick="bsum();"><u>TOTAL WEEKLY SURPLUS</u></b></label>
</td>
</tr>
</table>
</center>
</div>
答案 0 :(得分：1)
您可以使用jQuery中的几行简单代码完成所有计算：
$(':input').on('change blur keyup', function(){
var a = parseInt($('#a1').val()) || 0;
var b = parseInt($('#a2').val()) || 0;
var c = parseInt($('#a3').val()) || 0;
var aresult = a + b + c;
var ad2 = $('#aduration2').val();
var ad3 = $('#aduration3').val();
switch(ad2){
case 'Monthly':
$('#a4').val( (aresult * 12) / 52 );
break;
case 'Fortnightly':
$('#a4').val( (aresult * 26) / 52 );
break;
case 'Weekly':
$('#a4').val( aresult );
break;
}
switch(ad3){
case 'Monthly':
$('#a5').val( (aresult * 12) / 52 );
break;
case 'Fortnightly':
$('#a5').val( (aresult * 26) / 52 );
break;
case 'Weekly':
$('#a5').val( aresult );
break;
}
});
小提琴HERE
您提及的代码中的PS #aduration1，这是您在HTML中不存在的内容，以及您对#aduration3进行双倍计算
答案 1 :(得分：0)
<code>
$(':input').on('change blur', function(){
var a = parseInt($('#a1').val()) || 0;
var b = parseInt($('#a2').val()) || 0;
var c = parseInt($('#a3').val()) || 0;
var aresult = a + b + c;
var ad1 = $('#aduration1').val();
var ad2 = $('#aduration2').val();
var ad3 = $('#aduration3').val();
switch(ad1){
case 'Monthly':
$('#a4').val( (aresult * 12) / 52 );
break;
case 'Fortnightly':
$('#a4').val( (aresult * 26) / 52 );
break;
case 'Weekly':
$('#a4').val( aresult );
break;
}
switch(ad2){
case 'Monthly':
$('#a4').val( (aresult * 12) / 52 );
break;
case 'Fortnightly':
$('#a4').val( (aresult * 26) / 52 );
break;
case 'Weekly':
$('#a4').val( aresult );
break;
}
switch(ad3){
case 'Monthly':
$('#a4').val( (aresult * 12) / 52 );
break;
case 'Fortnightly':
$('#a4').val( (aresult * 26) / 52 );
break;
case 'Weekly':
$('#a4').val( aresult );
break;
}
}）;