I am not able to get select2 dropdown previous value

Below is the design part of dropdown

To resolve I have retry multiple code but none of them work for me.

Below are the code which I have tried

const $country = $content.find('.input.LOSS_STATS_COUNTRY');

Code : 1

$country.on('change', function () {
    debugger;
    var newStatus = $(this).val();
    var oldStatus = $(this).data('pre');
    console.log(newStatus "-" oldStatus);
}).data('pre', $country.val());

Code : 2

$country.on('focusin', function(){
    console.log("Saving value "   $(this).val());
    $(this).data('val', $(this).val());
});

$country.on('change', e => {
    debugger;
        let before_change = $country.data('val');
        console.log(before_change);
        const country = $country.val();           
    });

code : 3

$country.select2({}).focus(function () {
    debugger;
    console.log(v.target.value);

    // Store the current value on focus and on change
    $(this).data('pre', $(this).val());
}).on('change', e => {
    debugger;
        let before_change = $country.data('pre');
        console.log(before_change);
        const country = $country.val();            
    });

Code : 4

   $country.click(function(v){
    debugger;
    console.log(v.target.value);
   
    // Store the current value on focus and on change
    $(this).data('pre', $(this).val());
}).on('change', e => {
    debugger;
        let before_change = $country.data('pre');
        console.log(before_change);
        const country = $country.val();
       
    });

code : 5

 $country.on('focusin', function () {
    debugger;
    // Store the current value on focus and on change
    $(this).data('pre', $(this).val());
}).on('change', e => {
    debugger;
        var before_change = $(this).data('pre');
        const country = $country.val();
        
    });

code : 6

$country.on('focusin', function () {
    debugger;
    // Store the current value on focus and on change
    $(this).data('pre', $(this).val());
}).on('change', e => {
    debugger;
        var before_change = $(this).data('pre');
        const country = $country.val();
        
    });

On select2 of dropdown my focus/focusing/click event is not called and because of that I am not able to set the previous value. I want my previous value before change event of dropdown is called manually

Note : On select2 dropdown change my change event is called but other events are not called

CodePudding user response：

On change works with select2.

Focus/Click do not work as the underlying select has been hidden by the select2 wrapper.

It's unclear the requirement, if you want "initial value" vs "value before the current value", to get "previous value" you need to update with the "current" value when it changes.

$('.select2').select2();

var $country = $(".select2");

$country.on('change', function () {
    var newStatus = $(this).val();
    var oldStatus = $(this).data('pre');

    // add this line
    $country.data('pre', newStatus);
    
    console.log(newStatus "-" oldStatus);
}).data('pre', $country.val());

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<!-- no indication what was in OPs select, so using starter entries -->
<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>