Question

我试图弄清楚如何根据下拉列表中选择的类型计算多个HTML输入字段的总和。基本上我有多个看起来像这样的下拉菜单。

<select name="type1" id="type1">
    <option value="">Please Select</option>
    <option value="Sick">Sick</option>
    <option value="Vacation">Vacation</option>
    <option value="Holiday">Holiday</option>
    <option value="Floating Holiday">Floating Holiday</option>
    <option value="Jury Duty">Jury Duty</option>
    <option value="Bereavement">Bereavement</option>
    <option value="Suspension Paid">Suspension Paid</option>
    <option value="Suspension Unpaid">Suspension Unpaid</option>
</select>

然后我有多个输入，他们可以输入使用的PTO小时数。

<input name="hours1" type="text" id="hours1" size="4" maxlength="2" />

然后为每种类型添加几个字段。

Sick:<input name="totsick" type="text" id="totsick" size="4" maxlength="2" />
Vacation:<input name="totvac" type="text" id="totvac" size="4" maxlength="2" />

等

我想要做的是根据员工输入PTO hours1字段的内容以及选择的类型来动态计算总字段中的总和。

因此，如果用户选择Vacation输入8，那么我想要动态更新该类型的总字段的总小时数字段。有多行输入，所以如果员工在两个不同的日期选择两次假期，我希望总数计算每个的总和，并将其放在总休假时间为16小时。

Answer 1

我尝试做一个纯粹的Javascript示例：

function process() {
    var select = document.getElementById("type1");
    var value = select.options[select.selectedIndex].value;

    if (value == "Sick") {
        addTo("totsick");
    } else if (value == "Vacation") {
        addTo("totvac");
    }
}

function addTo(elId) {
    var element = document.getElementById(elId);
    var current = element.value;
    var add = document.getElementsByName("hours1")[0].value;
    alert(current+"/"+add);
    // + before for integer conversion
    element.value = +current + +add;
}

您可以看到我作为示例制作的这个JSFiddle：JSFiddle

动态计算小时总和

1 个答案: