Отменить выбор выпадающего списка после подтверждения окна

Question

Как я могу отменить выбор меню выбора с помощью диалогового окна подтверждения?

Идея состоит в том, что когда пользователь меняет меню выбора, им предлагается подтвердить свой выбор. если они выбирают «отменить», меню выбора возвращается к ранее выбранному значению. Если они выбирают «ОК», меню выбора ведет себя так, как ожидалось.

Вот код, я работаю над:

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/

пью Я хотел бы сделать это в родной JavaScript (не JQuery)

Answer 1

1. Вы перезаписываете lastSelected здесь:

   lastSelected = select.options[select.selectedIndex]; 
   

2. вы должны также сохранить новое значение, когда пользователь нажимает кнопку OK

Другой подход (сохраняет предыдущее значение как свойство избранных)

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

Answer 2

Попробуйте сниппает ниже

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