CODEWITHSUNDEEP
jquery
Lakhae
Lakhae

Reputation: 1899

How to revert back to previous select list option in dropdown using jquery?

I asked similar question in another thread but that what I was not helpful. So here I create a duplicate as the real one that I am using in my real project.

You can find my stuff in this fiddle

function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                //callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback();
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback() {
    $("#changer").val(lastValue); // this one doesn't work.
    // $("#changer").val('value1'); // This one works fine 
}

var lastValue;

$('#changer').bind("click", function(e) {
            lastValue = $(this).val();

        }).bind("change", function (e){
          fnOpenNormalDialog();
        });

<select id="changer">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
</select>

What I am trying to do is when user click cancel button I want revert back to original selected option in drop down.

Upvotes: 1

Views: 3402

Answers (2)

Patrick
Patrick

Reputation: 6948

Bind to "focus" event instead to set the last value.

$('#changer').bind("focus", function(e) {
    lastValue = $(this).val();
});

When you bind to "click", the selection of an item is counting as another click. For instance:

  1. You click the dropdown to activate the elements. lastValue is set to "value1"
  2. You click a selection (say value2). lastValue is set to "value2"
  3. You click no in the dialog and it sets .val() back to lastValue ("value2")

Using focus will populate the value once as soon as the user gives it focus (whether by tab or clicking the select to activate).

Upvotes: 1

user2019037
user2019037

Reputation: 762

You can store previous select value in a variable when user focus on select:

function fnOpenNormalDialog() {
  //define a variable to keep previous value
  var previous;
  $("#dialog-confirm").html("Confirm Dialog Box");

  // Define the Dialog and its properties.
  $("#dialog-confirm").dialog({
    resizable: false,
    modal: true,
    title: "Modal",
    height: 250,
    width: 400,
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        //callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback();
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

$("#changer").on('focus', function() {
  // Store the current value on focus and on change
  previous = this.value;
});

function callback() {
  //here use previous variable to select previous option
  $("#changer").val(previous);
}

var lastValue;

$('#changer').bind("click", function(e) {
  lastValue = $(this).val();

}).bind("change", function(e) {
  fnOpenNormalDialog();
});

fiddle

Upvotes: 3

Related Questions