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

Posted 2023-05-08

【中文标题】为啥我无法获得 select2 下拉列表的先前值

【英文标题】：Why I am not able to get select2 dropdown previous value为什么我无法获得 select2 下拉列表的先前值

【发布时间】：2021-11-05 00:46:14

【问题描述】：

我无法获取 select2 下拉列表的上一个值

下面是下拉的设计部分

为了解决，我重试了多个代码，但它们都不适合我。

下面是我试过的代码

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 上，我的焦点/聚焦/单击事件没有被调用，因此我无法设置以前的值。 我想要在手动调用下拉更改事件之前我以前的值

注意：在 select2 下拉更改中，我的更改事件被调用，但其他事件未被调用

【问题讨论】：

您正在使用select2“覆盖” - 使用select2 API。在没有 select2 插件/替换的情况下使用基本的select 尝试所有代码，看看你得到了什么。

@freedomn-m 你能发表你的答案吗，我无法将 select2 更改为 select

不能吗？还是不会？在没有 select2 的情况下尝试，这样您就可以对正在处理的代码感到满意 - 然后使用 select2 api 重新开始

例如，您不能“聚焦”或“单击”select，因为它不可见

如果您将.data('pre', $country.val()); inside change 事件移动，您的“代码 1”应该可以工作（即使使用 select2），否则它永远不会更新之前的值跨度>

【参考方案1】：

在change 上与select2 一起使用。

焦点/单击不起作用，因为底层 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>

【讨论】：

我们可以有一些技巧来检查下拉更改事件是手动更改而不是代码更改吗？