Question

我正在尝试使用html和JavaScript从下拉列表中选择值生成总数，我的代码正在运行。但是当我从下拉列表中更改我的选择时，我希望在每个下拉列表选项中更改总数。但它没有发生。比如，如果我在税后收入中输入价值并且每两周选择一次下拉，那么总的变化。但是当我输入第二和第三个值并分别按月和每周设置时，它不会根据选择而改变。哪里可能是问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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进行双倍计算

Answer 2

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

}）;

自动计算多个下拉选择

2 个答案: