本文详解如何正确配置 select2 插件，使其支持键盘方向键（↑↓）导航、自动聚焦选项并高亮当前选中项，解决原生 select 元素无法响应箭头键的问题。
本文详解如何正确配置 select2 插件，使其支持键盘方向键（↑↓）导航、自动聚焦选项并高亮当前选中项，解决原生 select 元素无法响应箭头键的问题。
Select2 是一个功能强大的下拉增强库，但其默认行为并不直接暴露原生 <option> 元素供 JavaScript 操作——它会将原始 <select> 替换为一套完全自定义的 DOM 结构（含 .select2-results__option 列表）。因此，直接监听原始 <select> 的 keydown 事件并操作 <option> 标签是无效的：这些 <option> 在 Select2 初始化后已脱离实际渲染流，不再参与交互。
正确的做法是利用 Select2 提供的官方事件钩子，并通过其 API 控制结果列表的焦点状态。以下是经过验证的专业实现方案：
✅ 正确实现方式（基于 Select2 v4+）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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 渲染后的选项（非原生 option） */
.select2-results__option--highlighted {
background-color: #e9f5ff !important;
color: #0056b3 !important;
}
/* 可选：增强视觉反馈 */
.select2-selection__rendered {
line-height: 1.5;
}
</style>
</head>
<body>
<div style="margin-left: 500px; margin-top: 200px;">
<form 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><br>
<input type="submit" name="save" value="Submit">
</form>
</div>
<script>
$(document).ready(function() {
// 初始化 Select2，启用搜索和键盘导航
$("#country").select2({
theme: "default",
placeholder: "Select a country...",
allowClear: true,
// 关键：启用键盘导航（默认已开启，但确保未被禁用）
// Select2 内置支持 ↑↓ 键移动焦点、Enter 确认、Esc 关闭
});
// 【可选】监听选中事件，执行自定义逻辑（如日志或联动）
$("#country").on("select2:select", function (e) {
console.log("Selected:", e.params.data.text, "Value:", e.params.data.id);
});
// 【可选】监听打开事件，确保首次聚焦时高亮首项
$("#country").on("select2:open", function () {
// Select2 默认会在打开时聚焦第一个可选项，无需额外干预
// 如需强制高亮首项，可通过以下方式（慎用，可能干扰默认行为）：
// const $dropdown = $(this).next('.select2').find('.select2-dropdown');
// $dropdown.find('.select2-results__option').first().addClass('select2-results__option--highlighted');
});
});
</script>
</body>
</html>⚠️ 关键注意事项
- 不要操作原生 <option>：Select2 渲染后，用户看到的选项全部来自 .select2-results__option 元素，原 <option> 仅作为数据源存在，不参与 UI 渲染。
- 方向键支持是内置的：Select2 默认启用键盘导航（↑↓ 移动焦点、Enter 确认、Tab 跳出、Esc 关闭），无需手动绑定 keydown 事件。
- 高亮样式需作用于 .select2-results__option--highlighted：这是 Select2 自动添加的 CSS 类，用于标识当前键盘聚焦项；直接修改该类即可定制高亮效果。
- 版本兼容性：本文示例基于 Select2 v4.1+，若使用 v3.x，请升级——v3 已停止维护且键盘支持不完善。
- 无障碍支持：Select2 默认遵循 ARIA 标准，支持屏幕阅读器；如需进一步优化，可添加 aria-label 或 title 属性。
✅ 总结
要让 Select2 下拉框真正支持键盘导航与高亮，核心在于信任并正确使用其内置机制，而非试图“绕过”插件去操控原始 DOM。只需正确初始化、合理配置，并通过官方事件（如 select2:select、select2:open）扩展业务逻辑，即可获得稳定、可访问、符合 WCAG 标准的交互体验。避免手动监听 keydown 并操作 <option>，那是导致功能失效的根本原因。
