是否有一种方法可以在用户选择条件更改后从选择下拉列表中选择一个新选项后重置上一个代码？

Question

我有此脚本检查选择字段的值并根据条件运行代码。例如，如果选择值等于1，则代码将输入值对用户无法更改的输入字段。

jQuery

$('#mon_reason').on('change click', function (e) {
  var reason = $('#mon_reason').val();
  if(reason == 1){
    $("#mon-worked").val(8.50);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(0.00);
    $("#mon-total").val(8.50);
  } if(reason == 2) {
    $("#mon-worked").val(0.00);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(8.50);
    $("#mon-total").val(8.50);
  } if(reason == 3) {
    $("#mon-worked").val(0.00);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(8.50);
    $("#mon-total").val(8.50);
  } if(reason == 4) {
    $("#mon-worked").val(4.25);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(4.25);
    $("#mon-total").val(8.50);
  }if(reason == 5) {
    $("#mon-worked").val(4.25);
    $("#mon-adjust").attr("readonly", true);
    $("#mon-adjust").val(4.25);
    $("#mon-total").val(8.50);
   
  }if(reason == 6 || reason == 7) {
    $("#mon-worked").val();
    $("#mon-adjust").attr("readonly", false);
    $("#mon-adjust").val();
    $("#mon-total").val(8.50);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val1 = +$("#mon-adjust").val();
            var val2 = +$("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });
  }if(reason == 8) {
    $("#mon-worked").val(8.50);
    $("#mon-adjust").attr("readonly", false);
    $("#mon-adjust").val();
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 = +$("#mon-worked").val();
            var val4 = +$("#mon-adjust").val();
            $("#mon-total").val(val3+val4);
        });
  }
  });
});

html

<select class="worked-input adjustment-input" id="mon_reason" name="">
<option disabled value="" selected="selected" >
        select an option ..
    </option>
    <option value="1" >
        working
    </option>
    <option value="2">
        Annual Leave Full Day - Paid
    </option>
    <option value="3">
        Annual Leave Full Day - Unpaid
    </option>
    <option value="4">
        Annual Leave Half Day - Paid
    </option>
    <option value="5">
        Annual Leave Half Day - Unpaid
    </option>
    <option value="6">
        Sick Leave
    </option>
    <option value="7">
        AWOL
    </option>
    <option value="8">
        Overtime
    </option>
</select>

<input readonly id="mon-worked" />
<input readonly id="mon-adjust" />
<input readonly id="mon-total" />

我的问题：

如果用户选择“病假（6）或AWOL（7）”，则输入字段“ mon-udjust”和“ mon-total”将彼此减去，以使我们获得“ mon工作的价值” ”。

如果用户选择加班（8）选项，则将加在一起输入字段“ mon worked”和“ mon-udjust”，以使我们获得“ mon-total”的价值。

我面临的问题是，用户是否选择了病假（6）或AWOL（7），然后决定选择加班（8）代码

            var val1 = +$("#mon-adjust").val();
            var val2 = +$("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });

仍然运行，并且在用户选择其他选项后不会被取消。如果您首先选择加班（8），然后更改为病假（6）或AWOL（7），

$("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 = +$("#mon-worked").val();
            var val4 = +$("#mon-adjust").val();
            $("#mon-total").val(val3+val4);
        });

此代码仍将运行，也会发生同样的情况。

如果条件已更改后，有什么方法可以将用户选择新的选项从选择下拉菜单中选择新选项后运行或删除上一个代码？

Answer 1

您已经有一个Onchange事件。只需在运行时保存一个变量并在下次运行时检查其值以查看用户以前的工作时的值即可。

Answer 2

$(document).ready(function(){
$('#mon_reason').on('change click', function (e) {
  var reason = $('#mon_reason').val();
  if(reason == 1){
    $("#mon-adjust").attr("disabled", true);
    $("#mon-adjust").val(0.00);
    $("#mon-total").val(8.50);
    $("#mon-worked").val(8.50);
  } if(reason == 2 || reason == 3 ) {
    $("#mon-adjust").attr("disabled", true);
        $("#mon-adjust").val(8.50);
        $("#mon-total").val(8.50);
        $("#mon-worked").val(0.00);
  } if(reason == 4 || reason == 5) {
    $("#mon-adjust").attr("disabled", true);
        $("#mon-adjust").val(4.25);
        $("#mon-total").val(8.50);
        $("#mon-worked").val(4.25);
   
  }if(reason == 6 || reason == 7) {
    $("#mon-worked").val();
    $("#mon-adjust").attr("disabled", false);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val1 = +$("#mon-adjust").val();
            var val2 = +$("#mon-total").val();
            $("#mon-worked").val(val2-val1);
        });
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
        $("#mon-total").val(8.50);
    });

    $("#mon-adjust").val();

    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
    if ($('#mon-adjust').val() > 8.50 
        && e.keyCode !== 46
        && e.keyCode !== 8
       ) {
       e.preventDefault();    
       $('#mon-adjust').val(8.50);
    }
    });
   
    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
            if ($(this).val() < 0.00 
                && e.keyCode !== 46
                && e.keyCode !== 8
            ) {
            e.preventDefault();    
            $(this).val(0.00);
    }
    });
  }if(reason == 8) {
    $("#mon-adjust").attr("disabled", false);
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
            var val3 = +$("#mon-worked").val();
            var val4 = +$("#mon-adjust").val();
            $("#mon-total").val(val3+val4);
        });
    $("#mon-adjust").on('keyup keydown change click keypress', function(){
        $("#mon-worked").val(8.50);
    });

    $("#mon-adjust").val();

    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
    if ($('#mon-adjust').val() > 8.50  
        && e.keyCode !== 46
        && e.keyCode !== 8
       ) {
       e.preventDefault();    
       $('#mon-adjust').val(8.50);
    }
    });
   
    $('#mon-adjust').on('keyup click keydown change keypress', function(e){
            if ($('#mon-adjust').val() < 0.00 
                && e.keyCode !== 46
                && e.keyCode !== 8
            ) {
            e.preventDefault();    
            $('#mon-adjust').val(0.00);
    }
    });
  }
  });
});

我已经重写了脚本，因此当用户选择其他选项时，在执行的新代码中更加明确时，请撤消上一个重写的代码。以下代码中的一些添加也限制了输入字段的最低和最大。

总而言之，问题在于，在满足某个条件但没有撤销时，代码正在执行，因为在改变条件时我不够明确。