如何在取消下拉列表change事件时用纯JavaScript恢复原选中值？求改Fiddle

我特意给你写了一个纯原生JavaScript的实现方案，完全不需要依赖任何库，核心逻辑就是先记住下拉框的初始选中状态，当用户切换选项后如果取消确认，就把选中状态恢复回去。下面是完整的代码示例：

<select id="dropdownId">
  <option>Option A</option>
  <option>Option B</option>
</select>
<select id="dropdownId2">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<script>
// 获取两个下拉框元素
const dropdown1 = document.getElementById('dropdownId');
const dropdown2 = document.getElementById('dropdownId2');

// 保存每个下拉框的初始选中索引
let prevSelectedIndex1 = dropdown1.selectedIndex;
let prevSelectedIndex2 = dropdown2.selectedIndex;

// 定义通用的下拉框change事件处理函数
function handleDropdownChange(event) {
  const dropdown = event.target;
  const currentIndex = dropdown.selectedIndex;
  
  // 弹出确认提示，询问用户是否确认切换
  const confirmChange = confirm(`确定要切换到${dropdown.options[currentIndex].text}吗？`);
  
  if (!confirmChange) {
    // 用户取消，恢复到之前选中的索引
    dropdown.selectedIndex = dropdown.id === 'dropdownId' ? prevSelectedIndex1 : prevSelectedIndex2;
  } else {
    // 用户确认，更新保存的选中索引
    if (dropdown.id === 'dropdownId') {
      prevSelectedIndex1 = currentIndex;
    } else {
      prevSelectedIndex2 = currentIndex;
    }
  }
}

// 给两个下拉框绑定change事件
dropdown1.addEventListener('change', handleDropdownChange);
dropdown2.addEventListener('change', handleDropdownChange);
</script>

关键细节说明： #

• 用selectedIndex来保存选中状态比保存文本或value更可靠，因为有些下拉选项可能没设置value属性，索引是每个下拉框都有的属性
• 写了一个通用的事件处理函数，可以复用在多个下拉框上，避免重复代码
• 每次用户确认切换后，都会更新保存的“历史选中索引”，确保下次取消时能恢复到最新的确认状态
• 使用addEventListener绑定事件，比直接给onchange赋值更灵活，不会覆盖其他可能绑定的事件

你可以直接把这段代码复制到本地HTML文件里运行，效果就是：当你切换下拉框选项时，会弹出确认框，点击取消的话，下拉框就会自动回到之前选中的选项，完全符合你的需求。

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