Question

基本上我不是编码器我需要一个正确代码的例子才能完成这个。我正在尝试制作一个我在小提琴中链接的电子PTO表格。我想要做的是如果type1发生变化，那么它会删除或减去小时1中的任何内容，并且最好是在type1填充的总字段中。因此，如果你去小提琴选择Sick并在小时字段中键入8，它将自动计入病态改变的总小时数。然而，如果有人选择生病并且真正打算选择假期，那么他们必须手动删除并重新输入所有数字。我想整个事情自动化。我真的很感激你的智慧。

这里有多个选择字段。

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

这是员工在生病或其他任何时间进入的地方。

  <input onchange="javascript:process()" name="hours1" class"hours1" type="text" id="hours1" size="4" maxlength="2" />

当他们这样做时，它会使用

自动添加小时数

病

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

度假

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

jsfiddle demo

Answer 1

基本上，您应该重新计算每次更改类型选择和小时输入时的所有数字。

这样可以避免错误计算和许多不必要的逻辑。

这是一个示例FIDDLE

新代码：

//this clause runs after DOM is loaded
$(function(){
    //attach a onchange handler to all the type selects and hours texts easily
    $("select[id^='type']").change(function(){
        processTHREE();
    });
    $("input[id^='hours']").change(function(){
        processTHREE();
    });
});

function processTHREE() {
    //reset all totals
    $("#totsick").val("0");
    $("#totvac").val("0");
    $("#tothol").val("0");
    $("#totfl").val("0");
    $("#totjd").val("0");
    $("#totber").val("0");
    $("#totsp").val("0");
    $("#totsu").val("0");
    //get a list of all selects whose id starts with the word 'type'
    var _types = $("select[id^='type']");
    //iterate through them and check values
    //the id/value here are the id of the select, and the select itself, not his selected value
    $.each(_types, function (_idx, _value) {
        var current_select = _types[_idx];
        //gets the value of the selected option in the current select 
        var Selected_value = $("option:selected", current_select).val();
        //get the corresponding hours value, parent().parent() goes up twice
        //from the select, which means ->td->tr and in the same row search for
        //hours input
        var selected_hours = $("input[id^='hours']",$(current_select).parent().parent()).val();
        //check the value and add to relevant field
        if (Selected_value == "Sick") {
            addTo("totsick",selected_hours);
        } else if (Selected_value == "Vacation") {
            addTo("totvac",selected_hours);
        } else if (Selected_value == "Holiday") {
            addTo("tothol",selected_hours);
        } else if (Selected_value == "Floating Holiday") {
            addTo("totfl",selected_hours);
        } else if (Selected_value == "Jury Duty") {
            addTo("totjd",selected_hours);
        } else if (Selected_value == "Bereavement") {
            addTo("totber",selected_hours);
        } else if (Selected_value == "Suspension Paid") {
            addTo("totsp",selected_hours);
        } else if (Selected_value == "Suspension Unpaid") {
            addTo("totsu",selected_hours);
        }
    });
}
function addTo(elId,hours) {
    var element = document.getElementById(elId);
    var current = element.value;
    //alert(current+"/"+add);
    // + before for integer conversion
    element.value = +current + +hours;

}

根据选择更改删除字段

1 个答案: