javascript – 根据下拉选项更改结果输入 – jQuery HTML

@H_618_4@ 我正在尝试使用 HTML和jQuery构建计算器.到目前为止,我有：

HTML

<form accept-charset="UTF-8" action="#" id="calc" method="post">
    <div class="item-1">
        <label for="item-1">Item 1</label>
        <input class="income" id="item-1" size="50" />
        <SELEct id="SELEct-item-1" class="SELEct">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </SELEct>
    </div>
    <div class="item-2">
        <label for="item-2">Item 2</label>
        <input class="income" id="item-2" size="50" />
        <SELEct id="SELEct-item-2" class="SELEct">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </SELEct>
    </div>
    <div class="item-3">
        <label for="item-3">Item 3</label>
        <input class="income" id="item-3" size="50" />
        <SELEct id="SELEct-item-3" class="SELEct">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </SELEct>
    </div>
    <hr />
    <div class="grand-@R_968_10586@l">
        <label for="grand-@R_968_10586@l">@R_968_10586@l :</label>
        <input id="grand-@R_968_10586@l" size="50" disabled />
        <SELEct id="grand-@R_968_10586@l-filter" class="SELEct">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </SELEct>
    </div>
</form>

脚本

var $form = $('#calc'),$summands = $form.find('.income'),$sumDisplay = $('#grand-@R_968_10586@l');

    $form.delegate('.income','change',function (){
        var sum = 0;
        $summands.each(function () {
            var value = number($(this).val());
            if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

$("#grand-@R_968_10586@l-filter").change(function() {
        var e = document.getElementById("grand-@R_968_10586@l-filter");
        var strUser = e.options[e.SELEctedIndex].value;
        if (strUser == 'monthly' ) {
            // Monthly
        } else if (strUser == 'weekly' ) {
            // Weekly
        } else {
            //  Default (Daily)
        }
    });

这是一个有效的jsfiddle与上面的位：http://jsfiddle.net/4Q8Gh/1/

这个想法是最终用户应该能够添加任何选项(每日,每月,每周)的值(item1,item2和item3) – 单独 – 所以item1 / item2 / item3可以有任何选项(每日,每周,每月) ).

默认情况下,结果应显示在“每日”值中,结果输入可以再次通过以下任何选项进行过滤：每日,每月.

例如,我们有：

> item1 = 10(每日)
> item2 = 100(每周)
> item3 = 1000(每月)

这给了我们一个总计*：

>每日：10(100/5)(1000/20)= 80
>每周：(10 * 5)100(1000/4)= 400
>每月：(10 * 20)(100 * 4)1000 = 1600

*基于上述示例并考虑1周= 5个工作日和1个月= 4周

此时我迷失了,我不知道如何使用jQuery将这些想法转化为代码,所以任何帮助/指导都会非常感激.提前感谢您的任何反馈！

附：如果我的方法因任何原因不正确,我会非常乐意听取您的建议.

function calculate() {
    var sum = 0;
    $("#calc").find("input.income").each(function() {
        var val = parseFloat($(this).val());
        if(!isNaN(val)) {
            var unit = $("#SELEct-" + this.id).val();
            switch(unit) {
                case "daily": sum += val; break;
                case "weekly": sum += val / 5; break;
                case "monthly": sum += val / (5 * 4); break;
                default: break;
            }
        }
    });
    var unit = $("#grand-@R_968_10586@l-filter").val();
    switch(unit) {
        case "daily": sum *= 1; break;
        case "weekly": sum *= 5; break;
        case "monthly": sum *= (5 * 4); break;
        default: break;
    }
    $("#grand-@R_968_10586@l").val(sum);
}
$("#calc").delegate("input.income","change",calculatE);
$("#calc").delegate("SELEct.SELEct",calculatE);