当选项被选中时更改变量值,当不再被选中时返回先前的值

Change variable value when option is selected, return previous value when not selected anymore

本文关键字:返回 改变 选项 变量值 不再      更新时间:2023-09-26

我需要根据所选择的下拉菜单的选项更新变量的值(在示例中称为"tot")。如果我选择选项1或2,tot必须增加10,如果我选择选项3,变量"tot"必须不增加。如果我选择了选项1,然后我改变了主意,选择了选项3,那么Tot的值必须恢复。

这是select 的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;
   });
});

或者(如果我理解你的意思正确的话)....

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,但是对于这个例子

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