咨询：jQuery中select下拉框展开时的替代触发事件

这个问题我之前也碰到过，确实原生select的事件坑不少！试试这几个方案，应该能解决你的需求：

这是现代浏览器支持的标准事件，专门在select的下拉弹窗刚展开时触发，完美匹配你的需求：

• 不管是鼠标点击select、还是用键盘（比如Enter/空格键）打开下拉，都会触发
• 点击下拉里的选项时不会重复触发，因为弹窗已经处于显示状态了
• 兼容性不错，Chrome、Firefox、Safari（包括Mac版）都支持

用jQuery实现的代码示例：

$(selectElement).on('popupshow', function() {
  // 在这里添加你的选项逻辑，比如：
  if ($(this).find('option[data-dynamic]').length === 0) { // 避免重复添加
    $(this).append('<option value="new" data-dynamic>新增选项</option>');
  }
});

如果需要兼容一些不支持popupshow的旧浏览器，可以结合mousedown和focus事件来模拟：

• mousedown会在click之前触发，而且Mac Chrome里不会有点击选项重复触发的问题（因为点击选项时，select已经处于聚焦状态，我们可以加判断）
• 同时监听focus处理键盘打开下拉的场景

代码示例：

let isDropdownOpen = false;

$(selectElement).on('mousedown focus', function(e) {
  // 只在下拉未展开时执行
  if (!isDropdownOpen) {
    // 添加选项逻辑
    if ($(this).find('option[data-dynamic]').length === 0) {
      $(this).append('<option value="new" data-dynamic>新增选项</option>');
    }
    isDropdownOpen = true;
  }
});

// 下拉关闭时重置状态
$(selectElement).on('change blur', function() {
  isDropdownOpen = false;
});

• 一定要加重复添加的判断，不然每次打开下拉都会加一堆重复选项
• 如果是用第三方UI库（比如Select2、Bootstrap Select），它们有自己的下拉展开事件（比如show.bs.select），优先用库提供的事件更靠谱

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