Javascript 根据选择更改删除字段

基本上我不是一个程序员，我需要一个适当的代码来完成这个例子请。我正在尝试制作一个电子PTO表单，我已经在fiddle中链接了它。我想做的是，如果type1发生了变化，那么它会在几小时内删除或减去任何内容，最好是在type1填充的字段中。因此，如果您选择fiddle Sick并在hours字段中键入8，它将自动计入Sick onchange的总小时数。但是，如果有人选择了生病，并且真的打算选择休假，那么他们必须手动删除并重新输入所有数字。我想把整个过程自动化。我真的很欣赏你的智慧

这是有多个选择字段的选择

   <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="totvac" type="text" id="totvac" size="4" maxlength="2" />

---

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

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

这里有一个例子

新代码：

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

}

---

您没有将其标记为jQuery，但是您在JSFIDLE中选择了一个jQuery库，我可以假设您会接受jQuery解决方案吗？是的，这会起作用。也许每次更改时您都会更新所有的总和（在数字和选择上）是的，这就是我现在给他写的内容，这太完美了，你真的棒了！

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

}