本文详解如何正确配置 Select2 插件，使其支持键盘方向键（↑↓）导航、回车确认选择，并通过 CSS 高亮当前选中项，解决原生 keydown 绑定失效问题。
本文详解如何正确配置 select2 插件，使其支持键盘方向键（↑↓）导航、回车确认选择，并通过 css 高亮当前选中项，解决原生 `keydown` 绑定失效问题。
Select2 是一个功能强大的增强型下拉组件，但其内部 DOM 结构完全重构（隐藏原生 <select>，生成独立的 .select2-container），因此直接监听原 <select> 元素的 keydown 事件无法捕获键盘导航行为——因为焦点实际落在 Select2 渲染出的搜索输入框或下拉列表上，而非原始 <select>。
正确的做法是利用 Select2 提供的原生事件系统，而非尝试操作原生 <option> 的 class。以下为完整、可运行的解决方案：
✅ 正确实现键盘导航与高亮的核心逻辑
- 禁用原生 keydown 监听：删除对 $("#country").on("keydown", ...) 的错误绑定；
- 使用 Select2 官方事件：监听 select2:open、select2:selecting 和 select2:select；
- 高亮策略优化：仅在下拉展开时动态高亮匹配项（非静态 :selected），并确保高亮随键盘导航实时更新。
⚠️ 注意：Select2 默认已完美支持键盘导航（↑↓移动、Enter确认、Esc关闭），无需额外实现；我们只需在视觉层同步高亮当前聚焦项。
✅ 完整修复代码（含关键注释）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 使用稳定 CDN（推荐 select2 v4.1.0+） -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
/* 高亮聚焦项：Select2 使用 .select2-results__option--highlighted 类 */
.select2-results__option--highlighted {
background-color: #e3f2fd !important;
color: #1976d2 !important;
}
/* 可选：自定义选中项样式（不影响键盘导航） */
.select2-selection__rendered {
padding-left: 8px;
}
</style>
</head>
<body>
<div style="margin-left: 500px; margin-top: 200px;">
<form action="" method="post">
<select id="country" name="country" style="width: 200px;">
<optgroup label="Asia">
<option value="1">India</option>
<option value="2">Pakistan</option>
<option value="3">Afghanistan</option>
</optgroup>
<optgroup label="Americas">
<option value="4">United States</option>
<option value="5">Canada</option>
</optgroup>
</select>
<br/>
<input type="submit" name="save" value="Submit">
</form>
</div>
<script>
$(document).ready(function() {
// 初始化 Select2（启用搜索）
$("#country").select2({
placeholder: "Select a country...",
allowClear: true,
// 关键：启用键盘导航（默认 true，显式声明更清晰）
dropdownAutoWidth: true,
// 若需禁用搜索，设为 false；否则保持 true 以支持筛选
minimumInputLength: 0
});
// 【重要】监听 Select2 内部聚焦项变化事件
// select2:opening → select2:open → select2:selecting → select2:select
$("#country").on("select2:open", function (e) {
// 下拉打开后，确保首项被聚焦（Select2 默认行为）
// 我们只需确保 CSS 类生效，无需手动操作 DOM
});
// 【可选】监听选择过程，清除旧高亮（Select2 自动管理）
$("#country").on("select2:selecting", function (e) {
// Select2 在选择前会自动移除所有 --highlighted 类
// 此处一般无需干预，仅作示意
});
// 【可选】选择完成后执行业务逻辑
$("#country").on("select2:select", function (e) {
console.log("Selected:", e.params.data.text, "ID:", e.params.data.id);
// 可在此触发表单验证、联动加载等
});
});
</script>
</body>
</html>✅ 关键要点总结
- 不要操作原生 <option>：Select2 渲染的下拉菜单是独立 DOM（.select2-results__options），原 <option> 仅用于初始化数据；
- 使用官方 CSS 类名：select2-results__option--highlighted 是 Select2 为当前键盘聚焦项自动添加的标准类，直接覆盖其样式即可；
- 事件优先级：select2:open 表示下拉已展开，此时键盘导航已就绪；select2:selecting 在用户按下 Enter 或点击前触发；select2:select 在选择完成时触发；
- 兼容性保障：使用 jQuery 3.6+ 与 Select2 v4.1.0+ 组合，避免旧版事件 API 差异（如 v3.x 的 change 事件已弃用）；
- 无障碍支持：上述方案天然支持屏幕阅读器与键盘导航标准（ARIA 属性由 Select2 自动注入）。
通过遵循 Select2 的设计范式，而非绕过其渲染机制，即可零成本获得健壮、可访问、符合 WCAG 标准的键盘交互体验。
