无法获取select2下拉框变更前值，focus/click事件未触发如何解决

实现方案 #

无需依赖focus、click等无法触发的事件，仅通过可正常触发的change事件即可实现获取变更前值的需求，逻辑如下：

1. 初始化时先将下拉框的初始值存入data属性
2. 每次change事件触发时，先读取data中存储的上一次值，完成业务逻辑后再将当前最新值更新到data中，供下一次change事件读取

完整代码示例：

const $country = $content.find('.input.LOSS_STATS_COUNTRY');
// 初始化存储下拉框初始值
$country.data('pre', $country.val());

$country.on('change', function () {
    // 读取上一次存储的旧值
    const oldStatus = $(this).data('pre');
    const newStatus = $(this).val();
    // 此处添加你的业务逻辑
    console.log(newStatus + "-" + oldStatus);
    // 更新存储的值为当前最新值，供下一次变更使用
    $(this).data('pre', newStatus);
});

原方案失效原因说明 #

select2初始化后会隐藏原生的<select>元素，生成自定义的DOM结构供用户交互，所以直接给原生select绑定focus、click等事件自然无法触发，上述方案仅依赖可正常触发的change事件即可满足需求，不需要额外绑定其他事件。

内容的提问来源于stack exchange，提问作者user13677598