JQuery как отменить выбранное изменение

У меня есть поле выбора, и я бы хотел добавить подтверждение, прежде чем изменять его на определенный параметр. Пример:

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

Я думаю о добавлении скрытого поля ввода и обновлении его значения каждый раз, когда выбор изменяется. Таким образом, я могу получить предыдущее значение в функции change. Пример:

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

Есть ли более простой/лучший способ сделать это?

ОТВЕТЫ

Ответ 1

Вместо того, чтобы использовать глобальную переменную (зло!) Или скрытый элемент (злоупотребление DOM), вы можете использовать функцию $.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());
});

Ответ 2

Надеюсь, это поможет.

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

Я не уверен, что 'return false' эффективен для удаления атрибута 'readonly'.

Ответ 3

Вместо скрытого ввода вы можете использовать обычную переменную.

Ответ 4

Я думаю, что это может быть другим способом добиться того же. Этот код также отменяет выбранное изменение.

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

Ответ 5

$(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">

Ответ 6

Здесь более подробный и закомментированный вариант принятого однодневного ответа, который запрашивает подтверждение при каждом изменении и использует .data() а не jQuery.data().

Это может помочь людям понять логику немного больше.

Сопровождающее jsFiddle здесь.

// 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 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 the data value now?</button>
</div>

<div class="container_2">


</div>

Ответ 7

Если вы используете Select2, вы можете использовать что-то ниже,

$('select').on('select2:selecting', function() {
    if (!confirm('Are you sure you?')) {
         $(this).select2('close')
         return false
    }
})

Ответ 8

Я бы создал глобальную переменную и установил ее значение селектора в $(document).ready();. Затем каждый раз, когда значение изменяется, вы можете соответствующим образом изменить глобальное значение.

Ответ 9

Oldschool way (до использования 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>