如何实现下拉列表选中后自动打开下一下拉列表？

核心思路 #

通过监听元素的change事件捕获用户选择操作，在选中有效选项后，调用showPicker()方法自动打开下一个下拉选择器（<select>和绑定<datalist>的<input>均支持该API），同时配合禁用状态控制引导用户按流程操作。

完整示例代码 #

<!-- HTML结构 -->
<form>
  <!-- 第一个select -->
  <select id="select1">
    <option value="">请选择</option>
    <option value="opt1-1">选项1-1</option>
    <option value="opt1-2">选项1-2</option>
  </select>

  <!-- 第二个select -->
  <select id="select2" disabled>
    <option value="">请选择</option>
    <option value="opt2-1">选项2-1</option>
    <option value="opt2-2">选项2-2</option>
  </select>

  <!-- 第一个input+datalist -->
  <input type="text" id="input1" list="datalist1" disabled>
  <datalist id="datalist1">
    <option value="data1-1">数据1-1</option>
    <option value="data1-2">数据1-2</option>
  </datalist>

  <!-- 第二个input+datalist -->
  <input type="text" id="input2" list="datalist2" disabled>
  <datalist id="datalist2">
    <option value="data2-1">数据2-1</option>
    <option value="data2-2">数据2-2</option>
  </datalist>

  <!-- 第三个input+datalist -->
  <input type="text" id="input3" list="datalist3" disabled>
  <datalist id="datalist3">
    <option value="data3-1">数据3-1</option>
    <option value="data3-2">数据3-2</option>
  </datalist>
</form>

<script>
// 按联动顺序获取所有目标元素
const elements = [
  document.getElementById('select1'),
  document.getElementById('select2'),
  document.getElementById('input1'),
  document.getElementById('input2'),
  document.getElementById('input3')
];

// 为每个元素绑定联动逻辑
elements.forEach((el, index) => {
  // 最后一个元素无需绑定（无后续元素）
  if (index === elements.length - 1) return;

  el.addEventListener('change', () => {
    // 若当前未选中有效选项，不触发联动
    if (!el.value) return;

    const nextEl = elements[index + 1];
    // 启用下一个元素
    nextEl.disabled = false;
    // 聚焦并打开选择器
    nextEl.focus();
    // 优先使用原生showPicker API打开下拉
    if ('showPicker' in nextEl) {
      nextEl.showPicker();
    } else {
      // 降级处理：针对不支持showPicker的旧浏览器，模拟鼠标按下事件
      const event = new MouseEvent('mousedown', { bubbles: true });
      nextEl.dispatchEvent(event);
    }
  });
});
</script>

关键细节说明 #

• 顺序控制：将元素按联动顺序存入数组，确保触发逻辑的连贯性。
• 状态引导：初始禁用后续元素，选中前一个选项后再启用，避免用户跳过步骤。
• API兼容性：showPicker()是现代浏览器原生支持的API，能稳定触发下拉弹窗；针对旧浏览器增加了模拟事件的降级方案。

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