如何检测<select>下拉框开闭状态以实现回车键差异化响应？

好问题！原生的<select>元素确实没有直接提供下拉列表的开闭事件，不过在Chrome环境下，我们可以通过一些巧妙的方式来模拟实现，甚至封装出你想要的那种状态判断方法。下面给你几种实用的方案：

我们可以通过跟踪鼠标点击、页面点击以及键盘事件，维护一个标记变量来记录下拉框的开闭状态，同时触发自定义的开闭回调：

// 初始化状态变量
let isSelectOpen = false;
const $select = $('#selExample');

// 监听鼠标点击下拉框（包括箭头区域）
$select.on('mousedown', function() {
  if (!isSelectOpen) {
    console.log('opened');
    // 这里可以触发你自定义的回调逻辑，比如调用预设的onChoicesOpen
    isSelectOpen = true;
  } else {
    console.log('closed');
    // 触发自定义关闭回调
    isSelectOpen = false;
  }
});

// 处理点击页面其他区域关闭下拉的情况
$(document).on('click', function(e) {
  if (isSelectOpen && !$select.is(e.target) && !$select.has(e.target).length) {
    console.log('closed');
    isSelectOpen = false;
  }
});

// 处理键盘操作（比如回车键切换开闭）
$select.on('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认选中第一个选项的行为
    if (isSelectOpen) {
      console.log('closed via Enter');
      isSelectOpen = false;
      $(this).blur();
    } else {
      console.log('opened via Enter');
      isSelectOpen = true;
      // Chrome支持原生showPicker()方法，直接触发下拉展开
      this.showPicker();
    }
  }
  // 处理Alt+Down箭头打开下拉的场景
  else if ((e.altKey && e.key === 'ArrowDown') && !isSelectOpen) {
    isSelectOpen = true;
    console.log('opened via keyboard');
  }
});

如果你想要像$("#selExample").isDropDownOpen()这样的便捷方法，可以把状态逻辑封装成jQuery插件：

$.fn.extend({
  // 判断下拉框是否打开
  isDropDownOpen: function() {
    return this.data('selectOpenState') || false;
  },
  // 初始化下拉框的开闭事件监听
  initSelectEvents: function(options) {
    const defaults = {
      onOpen: function() {},
      onClose: function() {}
    };
    const settings = $.extend({}, defaults, options);

    return this.each(function() {
      const $this = $(this);
      $this.data('selectOpenState', false);

      $this.on('mousedown', function() {
        if (!$this.isDropDownOpen()) {
          $this.data('selectOpenState', true);
          settings.onOpen.call(this);
        } else {
          $this.data('selectOpenState', false);
          settings.onClose.call(this);
        }
      });

      $(document).on('click', function(e) {
        if ($this.isDropDownOpen() && !$this.is(e.target) && !$this.has(e.target).length) {
          $this.data('selectOpenState', false);
          settings.onClose.call($this[0]);
        }
      });

      $this.on('keydown', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          if ($this.isDropDownOpen()) {
            $this.data('selectOpenState', false);
            settings.onClose.call(this);
            $this.blur();
          } else {
            $this.data('selectOpenState', true);
            settings.onOpen.call(this);
            this.showPicker();
          }
        }
      });
    });
  }
});

// 使用示例
$('#selExample').initSelectEvents({
  onOpen: function() {
    console.log('opened');
  },
  onClose: function() {
    console.log('closed');
  }
});

// 随时判断下拉框状态
console.log($('#selExample').isDropDownOpen()); // 返回true或false

• Chrome原生的showPicker()方法非常实用，能直接触发下拉框展开，但它只能在用户交互（点击、键盘事件）的上下文里调用，否则会触发安全报错。
• 上面的方案覆盖了鼠标点击、键盘操作、外部点击关闭等主流场景，完全适配Chrome环境。
• 如果是自定义模拟的下拉框（非原生<select>），逻辑会有所不同，但原生控件的话，以上方案完全适用。

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