如何在Mac端Chrome浏览器中通过代码触发<select>下拉列表展开？

用过Chrome的朋友可能发现，Windows上当<select>元素获取焦点后，按下Enter键就能展开选项列表，但Mac端的Chrome却不支持这个操作。我折腾了好几种程序化触发的方式，目前发现除了自己写个自定义下拉组件外，原生的方案都没能完美实现需求，下面是我试过的几种思路：

方法1：原生聚焦 + 模拟点击 #

我首先尝试的是监听Enter键事件，触发时先让<select>获取焦点，再调用click()方法模拟点击。但实测在Mac Chrome上这个方法完全不生效，Windows上倒是正常。

方法2：原生聚焦 + 模拟Mousedown事件 #

后来我想，有些浏览器的下拉展开逻辑可能绑定在mousedown事件上，而不是click，于是改成模拟鼠标按下的事件。结果在Mac Chrome上还是没反应，看来这个思路也行不通。

方法3：原生聚焦 + 模拟ArrowDown按键 #

既然手动按下ArrowDown键能展开下拉列表，那模拟这个按键事件总行吧？我创建了一个keydown事件，模拟按下ArrowDown，但Mac Chrome依然不买账，下拉列表纹丝不动。

方法4：自定义下拉组件 #

没办法，只能自己动手实现一个自定义的下拉结构，完全控制交互逻辑。这个方法是有效的，因为所有的展开、收起行为都是我们自己编写的，不受浏览器原生限制。

完整测试代码示例 #

下面是我用来测试的完整代码，你可以直接复制运行，在Mac Chrome上测试每个方法的效果：

JavaScript 代码

document.addEventListener('DOMContentLoaded', () => {

  // 方法1: 原生聚焦 + 模拟点击
  const select1 = document.getElementById('select1');
  select1.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log('方法1: 原生聚焦 + 模拟点击');
      select1.focus();
      select1.click();
    }
  });

  // 方法2: 原生聚焦 + 模拟Mousedown
  const select2 = document.getElementById('select2');
  select2.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log('方法2: 原生聚焦 + 模拟Mousedown');
      select2.focus();
      const mousedownEvent = new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
        view: window,
      });
      select2.dispatchEvent(mousedownEvent);
    }
  });

  // 方法3: 原生聚焦 + 模拟ArrowDown按键
  const select3 = document.getElementById('select3');
  select3.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log('方法3: 原生聚焦 + 模拟ArrowDown按键');
      select3.focus();
      const arrowDownEvent = new KeyboardEvent('keydown', {
        key: 'ArrowDown',
        code: 'ArrowDown',
        keyCode: 40,
        bubbles: true,
        cancelable: true,
      });
      select3.dispatchEvent(arrowDownEvent)
    }
  });

  // 方法4: 自定义下拉组件
  const customDropdown = document.getElementById('custom-dropdown');
  const customOptions = document.getElementById('custom-options');
  const customSelected = document.getElementById('custom-selected');

  customDropdown.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log('方法4: 自定义下拉组件（可正常工作）');
      const isExpanded = customDropdown.getAttribute('aria-expanded') === 'true';
      customDropdown.setAttribute('aria-expanded', !isExpanded);
      customOptions.hidden = isExpanded;
    }
  });

  customOptions.addEventListener('click', (event) => {
    customSelected.textContent = event.target.textContent;
    customDropdown.setAttribute('aria-expanded', 'false');
    customOptions.hidden = true;
  });
});

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉组件触发实验</title>
</head>
<body>
  <h1>Select下拉触发方案测试</h1>
  <p>给每个下拉框聚焦后按下<strong>Enter键</strong>，可以打开控制台查看日志，测试不同方案的效果。</p>

  <div>
    <h2>方法1: 原生聚焦 + 模拟点击</h2>
    <label for="select1">下拉框:</label>
    <select id="select1">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>

  <div>
    <h2>方法2: 原生聚焦 + 模拟Mousedown</h2>
    <label for="select2">下拉框:</label>
    <select id="select2">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>

  <div>
    <h2>方法3: 原生聚焦 + 模拟ArrowDown按键</h2>
    <label for="select3">下拉框:</label>
    <select id="select3">
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </select>
  </div>

  <div>
    <h2>方法4: 自定义下拉组件（可正常工作）</h2>
    <div id="custom-dropdown" tabindex="0" role="combobox" aria-expanded="false">
      <div id="custom-selected">请选择选项</div>
      <ul id="custom-options" role="listbox" hidden>
        <li role="option">选项1</li>
        <li role="option">选项2</li>
        <li role="option">选项3</li>
      </ul>
    </div>
  </div>
</body>
</html>

最终结论 #

Mac端Chrome对原生<select>的交互限制比较严格，通过模拟原生事件的方式无法触发下拉展开。如果你的需求必须支持Mac Chrome下Enter键展开下拉，目前唯一可行的方案就是实现一个自定义的下拉组件，完全控制交互逻辑。

备注：内容来源于stack exchange，提问作者Marcel Gruber