I am not able to get dropdown previous value

Below is the design part of dropdown

Below is the multiple code I have implemented to get the previous value

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 select 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 only when change event of dropdown is called manually

Note : on 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>