如何在JavaScript中实现下拉框change事件弹窗仅会话内触发一次

嘿，我明白你的需求了——要让指定的下拉框#dim_height在值变更时弹出确认框，但整个浏览器会话里只弹一次对吧？结合你现有的代码，咱们用sessionStorage来实现这个逻辑就很简单，下面是调整后的完整代码：

// 存储之前选中的值，避免重复选择同一值时触发弹窗
let previous;

jQuery("#dim_height")
  .on('focus', function() {
    // 聚焦时记录当前值
    previous = this.value;
  })
  .change(function() {
    // 首先检查两个条件：值真的变了，且会话内还没弹过弹窗
    if (this.value !== previous && !sessionStorage.getItem('hasShownTemplateConfirm')) {
      var r1 = confirm("Are you sure want to change the template?");
      
      // 不管用户点确定还是取消，只要弹窗弹过了，就标记会话内不再触发
      sessionStorage.setItem('hasShownTemplateConfirm', 'true');
      
      // 这里可以继续处理你的逻辑，比如用户确认后的操作
      if (r1) {
        // 用户点击了确定，执行变更后的逻辑
        console.log('Template change confirmed');
        previous = this.value; // 更新之前的值
      } else {
        // 用户点击了取消，把下拉框恢复到之前的值
        this.value = previous;
      }
    } else if (this.value !== previous) {
      // 值变了但弹窗已经弹过，直接更新值（如果需要的话）
      previous = this.value;
    }
  });

关键逻辑说明： #

• sessionStorage标记：用hasShownTemplateConfirm作为键，弹窗触发后就存入'true'，后续每次change事件都会先检查这个标记，存在就不再弹框。
• 值变更校验：加上this.value !== previous的判断，避免用户打开下拉框又选同一个值时触发不必要的逻辑。
• 会话生命周期：sessionStorage的存储只在当前浏览器标签页会话有效，关闭标签页后数据会自动清除，完美符合你“单次会话内仅触发一次”的需求。

如果需要针对多个下拉框分别控制弹窗次数，只需要给每个下拉框设置不同的sessionStorage键名就行，比如hasShownHeightConfirm、hasShownWidthConfirm之类的。

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