是否有一种方法来重置以前的代码从运行后，用户选择一个新的选项，从选择下拉框，如果条件发生了变化? &g

Question

我有这个脚本，它检查select字段的值并根据条件运行代码。例如，如果选择值等于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)或擅离职守(7)，则输入字段"不调整";和";mon-total"将彼此相减，得到"未工作"的值。

如果用户选择了选项超时(8)，则输入字段"未工作";和";mon-adjust"的值加在一起就得到了"mon-total"的值。

我遇到的问题是，如果用户选择病假(6)或擅离职守(7)，然后决定选择加班(8)代码

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

仍然运行，并且在用户选择不同的选项后不会被取消。如果你先选择加班(8)，然后改为病假(6)或擅离职守(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);
}
});
}
});
});

我重写了脚本，所以现在当用户选择不同的选项时，以前重写的代码通过在执行的新代码中更明确地撤消。下面代码中的一些添加也限制了输入字段的最小和最大。

总而言之，问题是代码在满足特定条件时被执行，但没有被撤消，因为当条件改变时我没有足够明确。