如何实现子下拉菜单选项被选中后自动置顶显示-js教程-PHP中文网

如何实现子下拉菜单选项被选中后自动置顶显示

通过 JavaScript 动态监听子菜单项点击事件，将选中的选项移至元素顶部并设为当前值，可完美实现“所选即所见”的交互效果。

通过 javascript 动态监听子菜单项点击事件，将选中的选项移至 `

在传统 Bootstrap 多级下拉菜单（如 .dropdown-submenu）中，原生 HTML 不支持直接将子菜单选项“回填”到主触发按钮文本中——因为这类结构本质是纯 DOM 导航菜单，而非表单控件。要实现「选择任意子级课程后，其名称显示在顶部按钮处」，必须改用语义化、可编程的 <select></select> + <optgroup></optgroup> 方案，这是符合 Web 标准且稳定可控的最佳实践。

以下是完整可运行的实现方案：

✅ 正确结构：使用语义化 `<select></select>` 替代 div-based 下拉

<select id="dropdown" class="form-control" style="width: 200px;"><option value="">Select Department</option>
<option value="MCA">MCA</option>
<optgroup label="B.Tech">
<option value="Courses">Courses</option>
<option value="EEE">EEE</option>
<option value="Civil">Civil</option>
<option value="Mechanical">Mechanical</option>
<option value="ComputerScience">Computer science</option>
<option value="Aeronautics">Aeronautics</option>
</optgroup>
<optgroup label="M.Tech">
<option value="Courses">Courses</option>
<option value="ICTechnology">IC Technology</option>
<option value="Civil">Civil</option>
<option value="DataScience">DataScience</option>
<option value="ComputerScience">Computer science</option>
<option value="EnvironmentalEngineering">Environmental Engineering</option>
</optgroup></select>

✅ 核心逻辑：JavaScript 实现“选中即置顶”

document.addEventListener('DOMContentLoaded', () => {
  const dropdown = document.getElementById('dropdown');

  // 监听所有 <option> 点击（含 optgroup 内部）
  dropdown.addEventListener('change', function () {
    const selectedOption = this.options[this.selectedIndex];
    const selectedValue = selectedOption.value;
    const selectedText = selectedOption.text;

    // 若非空选项才执行置顶
    if (!selectedValue) return;

    // 移除原位置的 option
    const targetOption = dropdown.querySelector(`option[value="${selectedValue}"]`);
    if (targetOption && targetOption !== dropdown.firstElementChild) {
      dropdown.removeChild(targetOption);
      // 插入到第一个位置（跳过 placeholder）
      const firstRealOption = dropdown.querySelector('option:not([value=""])');
      if (firstRealOption) {
        dropdown.insertBefore(targetOption, firstRealOption);
      } else {
        dropdown.appendChild(targetOption);
      }
    }

    // 重置选中状态为第一个（即刚置顶的项），确保视觉同步
    this.value = selectedValue;
  });
});</option>

⚠️ 注意事项与优化建议

不要混用 Bootstrap Dropdown + <select></select>：二者渲染机制冲突，<select></select> 在移动端有原生优化，而 div.dropdown 无表单语义，无法绑定 value 或提交数据。
<optgroup></optgroup> 不可被选中：仅 <option></option> 可触发 change 事件，因此无需监听 optgroup —— 上述答案中 querySelectorAll('optgroup') 是错误的，应监听 change 于 <select></select> 本身。
避免重复插入：代码中加入 targetOption !== dropdown.firstElementChild 判断，防止多次选择同一项导致 DOM 异常。
无障碍友好：<select></select> 天然支持键盘导航（Tab/Arrow）、屏幕阅读器，优于自定义下拉菜单。