javascript - 选择选项时更改变量值，不再选择时返回先前的值

Question

我需要根据选择的下拉菜单选项来更新变量的值（在示例中我称之为“tot”）。如果我选择选项 1 或 2，tot 必须增加 10，如果我选择选项 3，变量“tot”不得增加。如果我选择选项 1，然后我改变主意并选择选项 3，则必须恢复 Tot 的值。

这是选择的html

<select name='hello' id='hello'>
   <option>Select an option...</option>
   <option id='one'>One</option>
   <option id='two'>Two</option>
   <option id='three'>Three</option>
</select>

这是我编写的 jquery 脚本。我想我不明白 .change 函数的功能，因为它不像我预期的那样工作。

var extra = 0;
var tot = 0;

$(document).ready(function () {
   $('#hello').change(function(){
   if($('#one').is(':selected')) {
     extra = 10;
   }
   else if($('#two').is(':selected')) {
     extra = 10;
   }
   else if($('#three').is(':selected')) {
     extra = 0;
   }
     tot = tot + extra;
   });
});

Answer 1

var extra = 0;
var tot = 0;
var initialTot = tot;

$(document).ready(function () {

   var previous = 0;
   var selected = 0;
   $('#hello').change(function(){
   if($('#one').is(':selected')) {
     previous = selected;
     selected = 1;
     extra = 10;
   }
   else if($('#two').is(':selected')) {
     previous = selected;
     selected = 2;
     extra = 10;
   }
   else if($('#three').is(':selected')) {
     previous = selected;
     selected = 3;
     extra = 0;
   }
     tot = tot + extra;
     if(previous === 1 && selected === 3) {
         tot = initialTot;
     }
   });
});

Answer 2

或者（如果我正确理解了您的要求）....

var tot = 120;  //some number picked at random
var helloed = false; // flag for whether incremented 

$(document).ready(function(){
    $("#hello").change(function(){
        var sel = $(this).find(":selected").attr("id")
        if (sel == "one" || sel =="two" ) {
            if (!helloed) {
                tot += 10;
                helloed = true;
            }
        } else { // 'three' selected
            if (helloed) {
                tot -= 10;
                helloed = false;
            }
        }
    alert ("Tot is now " + tot);    
    });
});

如果有更多选项，我会选择 switch 而不是 IF 但这将适用于这个例子