j Query how to undo a select change

92

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

83

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

70

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

64

// 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>

53

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