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

以下为完整可运行示例：

Select DepartmentMCACoursesEEECivilMechanicalComputer scienceAeronauticsCoursesIC TechnologyCivilDataScienceComputer scienceEnvironmental Engineering

✅ 关键实现逻辑说明：

• 使用 + 替代 Bootstrap 的
  伪下拉，确保 DOM 可被 JS 精确操作；
• 通过 click 事件委托捕获 点击（change 事件在鼠标点击时可能延迟触发，而 click 更即时）；
• 利用 insertBefore() 将选中项插入到第一个非禁用、非默认选项之前，实现“视觉置顶”；
• dropdown.value = selectedValue 同步更新表单值，保证数据一致性。

⚠️ 注意事项：

• 避免对 绑定事件（它本身不可选，且无 value 属性）；
• 若需保留原有 Bootstrap 样式，可通过自定义 外观（如 appearance: none + 自定义箭头）或封装为 Web Component 实现样式与行为解耦；
• 移动端 Safari 对 的 click 事件支持稳定，但建议补充 change 事件兜底以兼容特殊场景；
• 如需支持键盘导航（Tab/方向键），应额外监听 keydown 并增强无障碍属性（aria-*）。

此方案轻量、语义清晰、兼容性好（支持 IE11+ 及所有现代浏览器），是实现“子菜单选中置顶”的推荐实践。