窗口确认后取消选择下拉选项

Cancel select drop-down choice after window confirm

本文关键字：选项选择取消确认窗口更新时间：2023-09-26

如何使用确认对话框取消选择菜单?

这个想法是当用户更改选择菜单时，他们会被提示确认他们的选择。如果他们选择"取消"，选择菜单会回到之前选择的值。如果他们选择"OK"，则选择菜单按预期操作。

下面是我正在处理的代码:

HTML:

<select class="selector" name="selector1">
  <option value="yes">Yes</option>
  <option value="no" selected="">No</option>
  <option value="maybe">Maybe</option>   
</select>
<select class="selector" name="selector2" >
  <option value="yes">Yes</option>
  <option value="no" selected="">No</option>
  <option value="maybe">Maybe</option>   
</select>

JavaScript

var selects = document.querySelectorAll('.selector');
var lastSelected = {};
for (i = 0; i < selects.length; i++) {
    var select = selects[i];
    lastSelected[select.name] = select.options[select.selectedIndex];
    select.addEventListener('change', function (e) {
       lastSelected = select.options[select.selectedIndex];
       if (confirm("Are you want to choose this?") == true) {
           return;
       } else {
          select.value = lastSelected[select.name];
       }
    });
}

我不完全确定为什么这不起作用，任何帮助是非常感激的。这是我正在制作的小提琴http://jsfiddle.net/je36eu78/2/

n。b我想在原生JavaScript(没有jquery)做这个

您在这里覆盖lastSelected:

lastSelected = select.options[select.selectedIndex];

你必须在用户点击OK时存储新值

另一种方法(将前一个值存储为select的属性)

var selects = document.querySelectorAll('.selector');
for (i = 0; i < selects.length; i++) {
    var select = selects[i];
    select.defaultValue=select.value;
select.addEventListener('change', function (e) {        
        if (confirm("Are you want to choose this?") == true) {
            this.defaultValue=this.value;
        } else {
           this.value=this.defaultValue;
        }
    });
}

试试下面的代码片段

var select = document.querySelectorAll('.selector');
for (i = 0; i < select.length; i++) {    
    select[i]['last'] = select[i].options[select[i].selectedIndex].value;
    (function(i){
        select[i].onchange = function(){
            if(confirm("Sure?")){
                select[i]['last'] = this.value;
            }else{  
                this.value = select[i]['last'];
            }
        };  
    })(i);
}

工作jsBin