我试图找出如何计算基于下拉框中选择的类型的多个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字段中输入的内容和选择的类型动态计算total字段中的总和。
因此,如果用户选择Vacation,在总小时数字段中输入8,我要动态更新该类型的总字段。有多行输入,因此,如果员工在两个不同的日期选择休假两次,我希望total计算每次休假的总和,并将其作为16小时放在总休假时间中。
我试着做一个纯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