Select2: How to get previous selected values

Question

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.

Lyckman

Answer 1

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

Wamsley

Answer 2

You can easily do it in the selecting event:

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

Laellaertes

This doesn't work at all. – Electrochemistry

Answer 3

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

Deirdra

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually of higher quality, and are more likely to attract upvotes. – Beetlebrowed

Answer 4

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

Electrochemistry

Answer 5

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

Durston

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Protrusion