jQuery cómo deshacer un cambio de selección

Question

Tengo un cuadro de selección, y me gustaría agregar una confirmación antes de cambiarla a una opción específica. Ejemplo:

<select name="select"> 
    <option value="foo" selected="selected">foo</option> 
    <option value="bar">bar</option> 
</select>​​​​​​​​​​​​​​​​​​

$('select').change(function() { 
    var selected = $(this).val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      // set back to previously selected option 
     } 
    } 
});

estoy pensando en añadir un campo de entrada oculto y actualizar su valor cada vez que se cambia la selección. De esta forma puedo recuperar el valor anterior en la función change. Example:

<input type="hidden" name="current" value="foo" />

$('select').change(function() { 
    var selected = $(this).val(); 
    var current = $('input[name=current]').val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      $(this).val(current); 
      return false; 
     } 
    } 

    $('input[name=current]').val(selected); 
});

¿Hay una mejor manera más fácil/de lograr esto?

Answer 1

En lugar de utilizar una variable global (! Maligno) o un elemento oculto (abuso del DOM) se puede utilizar la función de $.data:

$('select').change(function() { 
    var selected = $(this).val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      $(this).val($.data(this, 'current')); 
      return false; 
     }  
    } 

    $.data(this, 'current', $(this).val()); 
}); 

Answer 2

Puede usar una variable normal en lugar de una entrada oculta.

Answer 3

Crearía una variable global y la establecería en el valor del selector en $ (document) .ready() ;. Luego, cada vez que se cambia el valor, puede cambiar el valor global en consecuencia.

Answer 4

manera Oldschool (antes de que usamos jQuery):

<select id="mySelect" onchange="if(confirm('Do you really want to change?')){ doSomething(); } else { this.selectedIndex=myIndex; }"> 
    <option value="foo" selected="selected">foo</option> 
    <option value="bar">bar</option> 
</select> 
<script type="text/javascript"> 
    var myIndex = $('mySelect').selectedIndex; 
</script> 

Answer 5

Creo que esta puede ser la otra forma de lograr lo mismo. Este código también deshace el cambio de selección.

<div class="selection"> 

      <input type="radio" class="selected" value="test1" name="test1" 
      checked="checked" /><label>test1</label> 

      <input type="radio" name="test1" value="test2" /><label> 
      test2</label> 

      <input type="radio" name="test1" value="test3" /><label> 
      test3</label> 

    </div> 

    $("input[name='test1']").change(function() { 
      var response = confirm("do you want to perform selection change"); 
      if (response) { 
       var container = $(this).closest("div.selection"); 
       //console.log(container); 
       //console.log("old sel =>" + $(container).find(".selected").val()); 
       $(container).find(".selected").removeClass("selected"); 
       $(this).addClass("selected"); 
       //console.log($(this).val()); 
       console.log("new sel =>" + $(container).find(".selected").val()); 
      } 
      else { 
       var container = $(this).closest("div.selection"); 
       $(this).prop("checked", false); 
       $(container).find(".selected").prop("checked", true); 
      } 
     }); 

Answer 6

Espero que esto ayude.

$(YOUR_SELECT_ELEMENT).on({ 
    "ready": function (e) { 
     $(this).attr("readonly",true); 
    }, 
    "focus": function (e) { 
     $(this).data({ choice: $(this).val() }); 
    }, 
    "change": function (e) { 
     if (! confirm("Change selected option, proceed?")){ 
      $(this).val($(this).data('choice')); 
      return false; 
     } else { 
      $(this).attr("readonly",false); 
      return true; 
     } 
    } 
}); 

No estoy seguro de que 'return false' sea efectivo para eliminar el atributo 'readonly'.

Answer 7

$(document).on('change','.change_response_status',function() 
 
{ 
 
    var responseStatusId = this.id; 
 
    var responseID = $("#"+responseStatusId).attr('data-id'); 
 
    var previouesSatatus = $("#hidden_response_id_"+responseID).val(); 
 
    var confirmstatus = confirm("Are you sure you want to change status for this item?"); 
 
    var currentSelectedValue = $(this).val(); 
 

 
    if(confirmstatus==true) 
 
    { 
 
     $("#hidden_response_id_"+responseID).val(currentSelectedValue); 
 
    } 
 
    else 
 
    { 
 
     $(this).val(previouesSatatus); 
 
     $("#hidden_response_id_"+responseID).val(previouesSatatus); 
 
     return false; 
 
    } 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<select data-id="2" id="response_id_2" class="change_response_status" name="status"> 
 
    <option value="1">Accept</option> 
 
    <option value="2" selected="selected">No Respond</option> 
 
    <option value="3">Reject</option> 
 
</select> 
 
<input class="hidden_response_class" id="hidden_response_id_2" type="hidden" value="1" name="hidden_response_staus">

Esta es la mejor manera de mostrar la opción está seleccionada al hacer clic en el cuadro de confirmación cancle.