I am using select v4.0.3. How do I get the replaced/previous value of the select element? I already attached a 'change' listener but I can't seem to find the previous value.

I am using select v4.0.3. How do I get the replaced/previous value of the select element? I already attached a 'change' listener but I can't seem to find the previous value.

• javascript
• jquery-select2

5 Answers 5

Previously selected value can be acquired by using select2:selecting event

see the codes here: https://codepen.io/jacobgoh101/pen/ZpGvkx?editors=1111

$('select').on('select2:selecting', function (evt) {
  console.log('previously selected ' + $('select').val());
});
$('select').on('select2:select', function (evt) {
  console.log('now selected ' + $('select').val());
});

You can easily do it in the selecting event:

$(this).on("select2-selecting", function(e) {
  var curentValue = e.val;
  var previousValue = $(this).val();
});

var oldname;//global declaration
$('select').on('select2:selecting', function (evt) {
  oldName= $('select').val();
});
$(select).on("select2:select select2:unselecting", function (e) {
   //For selecting the new option
   var currentName= $(this).select2('data')[0].text;
   console.log(oldName);//you can get old name here also
});

This handles the selecting of a Select2 where you can get both the old and the new value and compare them if needed

$('select').on('select2:selecting', function (evt) {
    var oldSelect2Value = $(this).val();

    evt.preventDefault(); //this prevents any value from being changed yet

    var newSelect2Value = evt.params.args.data.id;

    //and if you want to set the new value:
    var conditionToChangeValue = true; //you can put any condition here if you want to apply the new value or keep the old value

    if(conditionToChangeValue){
        //this sets thew new value you have selected :
        $(this).val(newSelect2Value).trigger('change').select2("close");  //it needs to be closed manually
    }
    else{
        //this here keeps the old value;; you don't need to write extra code to apply the old value since it already has that value
    }
});

And if you want to manually trigger only 'select2:selecting' :

var someSelect2Value = "1";

$('select').val(someSelect2Value).trigger('change').trigger({
    type: 'select2:selecting'
});

Get previously selected value

$(document).on('select2:selecting', 'select', function (evt) {
   console.log('previously selected value :' + $(this).val());
});

Get current selected value

$(document).on('select2:select', 'select', function (evt) {
   console.log('current selected value : ' + $(this).val());
});

If you want to perform this function for a specific select use class like below

$(document).on('select2:selecting', 'select', function (evt) {
   if ($(this).hasClass("select_email_type")) {
      console.log('previously selected value :' + $(this).val());
   }
});