jQuery：如何在select的onChange事件中获取切换前后的value值？

当然可以实现这个需求啦！因为onChange触发时，select的value已经更新成新值了，所以咱们需要提前把旧值存起来，下面给你几种简单好用的方案：

方案1：全局变量存储旧值 #

这是最直接的方式，初始化时先拿到默认选中的value，之后每次触发事件时对比再更新：

// 初始化旧值为select的默认选中值
let oldValue = document.querySelector('select').value;

function getval(sel) {
  alert(`旧值: ${oldValue}, 新值: ${sel.value}`);
  // 更新旧值，方便下次事件触发时使用
  oldValue = sel.value;
}

对应的HTML保持你原来的写法即可：

<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

方案2：用元素的dataset属性存储旧值（无全局变量） #

如果不想用全局变量，可以把旧值存在select元素自己的data-*属性里，更干净：

<!-- 提前把默认选中的value写到data-old-value里 -->
<select onchange="getval(this);" data-old-value="1">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

function getval(sel) {
  const oldValue = sel.dataset.oldValue;
  alert(`旧值: ${oldValue}, 新值: ${sel.value}`);
  // 更新元素的data属性，存储当前新值作为下次的旧值
  sel.dataset.oldValue = sel.value;
}

方案3：现代事件绑定+闭包（推荐） #

更符合现代前端实践的写法，把内联事件换成addEventListener，用闭包存储旧值，避免全局变量和内联代码的耦合：

const selectElement = document.querySelector('select');
let oldValue = selectElement.value;

selectElement.addEventListener('change', function() {
  const newValue = this.value;
  alert(`旧值: ${oldValue}, 新值: ${newValue}`);
  oldValue = newValue;
});

对应的HTML可以去掉内联事件：

<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

简单来说，核心思路就是提前缓存旧值，因为事件触发时select的value已经是新的了，没法直接从事件里拿到旧值，必须靠咱们自己存好~

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