如果js Confirm返回false，则重置回选择字段上的上一个选项

Question

我有一个HTML选择字段。其中一个选项是selected。如果我选择任何其他change偶数火灾并显示确认提示。

我想要的是当用户取消确认时conf为false。我想重置回上一个选定的选项。但目前选择了新选项。

HTML

<select id="mySelect">
    <option>Foo0</option>
    <option seleted="selected">Foo1</option>
    <option>Foo3</option>
    <option>Foo4</option>
    <option>Foo5</option>
    <option>Foo6</option>
</select>

JS / JQ

jQuery(document).ready(function($){
   var select = $('#mySelect');
   select.change(function(){
     var conf = confirm('Are You Sure?');
     if(!conf){
         // reset the select back to previous
         return;
     }

     // do stuff

  });
});

Answer 1

我在这里为你创建了一个jsfiddle： http://jsfiddle.net/CZ8F9/

我只是保存以前的索引。

jQuery(document).ready(function($){
   var index = $('#mySelect').prop('selectedIndex'); 
    var select = $('#mySelect');
   select.change(function(e){
       alert(index)
     var conf = confirm('Are You Sure?');
     if(!conf){
             $('#mySelect').prop('selectedIndex',index);
         // reset the select back to previous
         return false;
     }
       else{
       index= $('#mySelect').prop('selectedIndex');}

     // do stuff

  });
});

Answer 2

您可以使用jQuery＆＃39; .focus()将先前选定的选项存储在焦点上，该选项将在更改选择之前触发。

jQuery(document).ready(function($){
    var select = $('#mySelect');
    var previouslySelected;

    select.focus(function(){
        previouslySelected = this.value;
    }).change(function(){
     var conf = confirm('Are You Sure?');
     if(!conf){
         // reset the select back to previous
         this.value = previouslySelected;
         return;
     }

     // do stuff
    alert('Doing stuff');
  });
});

演示：http://jsfiddle.net/9mAHP/1/

Answer 3

你不是在找这样的东西，不是吗？只需存储该值，然后在需要时抓取它。

$(document).ready(function($){   
   var select = $('#mySelect');
   var current = $('#mySelect').find(":selected").text();
   select.change(function(){
     var conf = confirm('Are You Sure?');
     if(!conf){
         select.val(current);
     } else{
         // do stuff
     }
     current = $('#mySelect').find(":selected").text();
     // reset the select back to previous
     return;
  });
});

DEMO：http://jsfiddle.net/Qw6K9/

Answer 4

将旧值作为数据并在选择错误时将其恢复...

 var select = $('#mySelect');
   select.click(function(){
        $(this).data("oldval", this.value);
    }).change(function(){
     var conf = confirm('Are You Sure?');
     if(!conf){
        $(this).val($(this).data("oldval"));
     }  
  });