通过 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;
  });
});

⚠️ 注意事项与优化建议

• 不要混用 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）、屏幕阅读器，优于自定义下拉菜单。

✅ 效果总结

用户点击任意课程（如 “DataScience”），该选项将：

1. 立即成为 <select></select> 的当前选中值；
2. 自动移动至下拉列表最上方（第二项，首项仍为提示文字）；
3. 页面刷新或表单提交时，能正确获取 dropdown.value。

这种基于标准表单控件的实现，简洁、健壮、跨浏览器兼容，是生产环境推荐的解决方案。