examples - jQuery cómo deshacer un cambio de selección
jquery pdf (9)
Aquí hay una versión más detallada y comentada de la respuesta aceptada de lonesomeday que solicita confirmación en cada cambio y utiliza .data()
lugar de jQuery.data()
.
Puede ayudar a las personas a comprender un poco más la lógica.
Acompañando jsFiddle está here .
// set the initial data value
$(document).ready(function() {
var my_select = $("#my_select");
my_select.data("current", "foo");
});
// when selecting another option
$(''select'').change(function() {
var $this = $(this);
var selected = $this.val();
logit($this, selected, 1); // log data to screen
// if clicking cancel on the confirm dialog
if (!confirm(''Are you sure?'')) {
logit($this, selected, 2); // log data to screen
// set the select''s value to the stored data value
var previous_data_value = $(this).data("current");
$this.val(previous_data_value);
// escape the onchange function
return false;
}
// if clicking OK, update the data value to the chosen option
logit($this, selected, 3); // log data to screen
$this.data("current", $this.val());
});
// helper functions only below
$(document).on("click", ".clicker", function() {
var my_select = $("#my_select");
alert(my_select.data("current"));
});
function logit($this, selected, instance) {
var current_data_value = $this.data("current");
if (instance === 1) {
var value_log = "<span>you selected the value: " + selected + "</span>";
$(".container_2").append(value_log);
var data_log = "<span>the previous value was: " + current_data_value + "</span>";
$(".container_2").append(data_log);
} else if (instance === 2) {
$(".container_2").append("<span>you clicked Cancel, value was reverted to: " + current_data_value + "</span>");
}
if (instance === 3) {
$(".container_2").append("<span>you clicked OK, value was changed from ''" + current_data_value + "'' to ''" + selected + "''</span>");
}
$(".container_2").append("<span>------------------------------------------------------</span>");
}
* {
box-sizing: border-box;
}
select {
width: 200px;
float: left;
}
.clicker {
width: 200px;
float: left;
}
.container_1 {
margin: auto;
width: 400px;
background: lightgray;
padding-top: 10px;
padding-bottom: 10px;
}
.container_1:after {
clear: both;
content: " ";
height: 0;
display: block;
}
.container_2 {
width: 400px;
height: 300px;
overflow-y: auto;
border: 1px solid gray;
padding: 10px;
margin: auto;
background: #222;
}
span {
display: block;
margin-bottom: 5px;
color: lime;
font-family: arial;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_1">
<select id="my_select">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</select>
<button class="clicker">what''s the data value now?</button>
</div>
<div class="container_2">
</div>
Tengo un cuadro de selección y me gustaría agregar una confirmación antes de cambiarlo 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 agregar un campo de entrada oculto y actualizar su valor cada vez que se cambie la selección. De esa forma puedo recuperar el valor anterior en la función de 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 forma más fácil / mejor de lograr esto?
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.
Creo que esta puede ser la otra forma de lograr lo mismo. Este código también deshace el cambio seleccionado.
<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);
}
});
En lugar de usar una variable global (¡malvado!) O un elemento oculto (abuso del DOM) puede usar la función $.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());
});
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''.
Manera de Oldschool (antes usábamos 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>
Puede usar una variable normal en lugar de una entrada oculta.
Si está utilizando Select2, puede usar algo a continuación,
$(''select'').on(''select2:selecting'', function() {
if (!confirm(''Are you sure you?'')) {
$(this).select2(''close'')
return false
}
})
$(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 ya seleccionada al hacer clic en cancle en el cuadro de confirmación.