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);    
    });
});

如果有更多的选项，我会选择开关而不是IF，但这样做可以用于此示例

选择选项时更改变量值，不再选择时返回上一个值

2 个答案: