使用PHP和JS实现SELECT下拉选择变更确认功能的问题求助

问题根因 #

下拉框的onchange事件是选中状态变更完成后才触发的，你现有逻辑只处理了确认后的提交逻辑，没有处理取消操作后的状态回滚，所以选中值会停留在新选择的选项上。

具体修改方案 #

方案1：使用元素自定义属性存储上一次选中值（推荐，无全局变量污染） #

1. 初始化阶段（页面DOM加载完成后执行）：

const transferSelect = document.getElementById('transfer_option');
// 给下拉框元素新增自定义属性，存储初始选中值
transferSelect.dataset.lastSelected = transferSelect.value;

2. 修改JS中的transfer_select函数：

function transfer_select() {
  const selectEl = document.getElementById('transfer_option');
  const newSelected = selectEl.value;
  if(confirm('Are you sure ?')){
    // 确认修改：更新存储的上一次选中值
    selectEl.dataset.lastSelected = newSelected;
    // 原有ajax逻辑保留在此处
  } else {
    // 取消修改：回滚到上一次的选中值
    selectEl.value = selectEl.dataset.lastSelected;
  }
}

方案2：使用全局变量存储上一次选中值 #

如果你的项目逻辑简单，也可以用全局变量存储状态：

1. 提前定义全局变量存储初始值

// 全局作用域下定义
let lastTransferSelected = '';
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
  lastTransferSelected = document.getElementById('transfer_option').value;
})

2. 修改transfer_select函数：

function transfer_select() {
  const selectEl = document.getElementById('transfer_option');
  const newSelected = selectEl.value;
  if(confirm('Are you sure ?')){
    lastTransferSelected = newSelected;
    // 原有ajax逻辑
  } else {
    selectEl.value = lastTransferSelected;
  }
}

适配说明 #

你现有PHP生成的下拉框代码不需要修改，默认情况下未设置value属性的option，选中值会自动取标签内的文本内容，和上述逻辑完全兼容。如果后续调整为用用户ID作为提交值，只要给option加上对应的value属性即可，逻辑无需改动。

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