如果js确认返回false，则重置回“选择”字段上的上一个选项

Question

我有一个HTML选择字段。 selected一个选项的地方。 如果我选择任何其他change甚至会触发并显示确认提示。

我想要的是当用户取消确认aka 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的.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;
  });
});

演示： http : //jsfiddle.net/Qw6K9/

Answer 4

将您的oldvalue用作数据，并在选择错误时将其取回...

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