本文介绍如何通过原生 JavaScript 实现：当用户从嵌套的 子菜单中选择任意选项时，该选项自动移至 下拉框顶部并设为当前选中值，提升用户体验与交互一致性。
本文介绍如何通过原生 javascript 实现：当用户从嵌套的 `
在标准 HTML 中，原生 <select></select> 元素支持 <optgroup></optgroup> 语义化分组，但不原生支持“子菜单点击后置顶”功能。Bootstrap 等框架的 .dropdown-menu 是纯 DOM 结构（基于 <ul></ul>/<li>），无法直接绑定 value 或触发 <select></select> 的原生行为。因此，要实现“选中即置顶”，必须放弃伪下拉（如 Bootstrap dropdown），转而使用语义化、可编程的 <select></select> + <optgroup></optgroup> 组合——这是浏览器原生支持、JS 可精准操控的可靠方案。
以下为完整可运行示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Subdropdown Selection with Top Placement</title>
<style>
#dropdown {
padding: 8px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
margin-top: 12px;
}
optgroup {
font-weight: bold;
color: #555;
}
</style>
</head>
<body>
<select id="dropdown">
<option value="" disabled selected>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>
<script>
const dropdown = document.getElementById('dropdown');
// 监听所有 option 的 click（注意：optgroup 不触发 click，需监听其内部 option）
dropdown.addEventListener('click', (e) => {
if (e.target.tagName === 'OPTION' && e.target.value) {
const selectedOption = e.target;
const selectedValue = selectedOption.value;
// 1. 设置当前选中值
dropdown.value = selectedValue;
// 2. 将该 option 移动到首位（排除 disabled/placeholder）
const firstOption = dropdown.querySelector('option:not([disabled]):not([selected])');
if (firstOption && firstOption !== selectedOption) {
dropdown.insertBefore(selectedOption, firstOption);
}
}
});
</script>
</body>
</html>✅ 关键实现逻辑说明：
- 使用
<select></select>+<optgroup></optgroup>替代 Bootstrap 的<ul></ul>伪下拉，确保 DOM 可被 JS 精确操作； - 通过
click事件委托捕获<option></option>点击（change事件在鼠标点击时可能延迟触发，而click更即时）； - 利用
insertBefore()将选中项插入到第一个非禁用、非默认选项之前，实现“视觉置顶”； -
dropdown.value = selectedValue同步更新表单值，保证数据一致性。
⚠️ 注意事项：
- 避免对
<optgroup></optgroup>绑定事件（它本身不可选，且无value属性）； - 若需保留原有 Bootstrap 样式，可通过自定义
<select></select>外观（如appearance: none+ 自定义箭头）或封装为 Web Component 实现样式与行为解耦； - 移动端 Safari 对
<select></select>的click事件支持稳定，但建议补充change事件兜底以兼容特殊场景； - 如需支持键盘导航（Tab/方向键），应额外监听
keydown并增强无障碍属性（aria-*）。
此方案轻量、语义清晰、兼容性好（支持 IE11+ 及所有现代浏览器），是实现“子菜单选中置顶”的推荐实践。
