为什么我无法获得 select2 下拉列表的先前值

Question

我无法获取 select2 下拉列表的先前值

下面是dropdown的设计部分

为了解决，我重试了多个代码，但 none 对我有用。

下面是我试过的代码

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

代码：1

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

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

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

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

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

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

在下拉菜单的 select2 上，我的 focus/focusing/click 事件没有被调用，因此我无法设置以前的值。我想要在手动调用下拉列表的更改事件之前我以前的值

注意：在 select2 下拉菜单更改时调用我的更改事件，但不调用其他事件

Answer 1

On change 适用于 select2。

Focus/Click 不起作用，因为底层 select 已被 select2 包装器隐藏。

要求不清楚，如果你想要“初始值”与“当前值之前的值”，要获得“以前的值”，你需要在它发生变化时用“当前”值更新。

$('.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>

为什么我无法获得 select2 下拉列表的先前值

Why I am not able to get select2 dropdown previous value

jquery

jquery-ui

jquery-select2