Select2下拉框键盘导航与选中高亮实现方法

本文详解如何正确配置 Select2 插件，使其支持键盘方向键（↑↓）导航、回车确认选择，并通过 CSS 高亮当前选中项，解决原生 keydown 绑定失效问题。

当你在使用 Select2 这个增强下拉组件时，有没有遇到过这种情况：键盘上的方向键和回车键完全不起作用？更准确地说，并不是完全没用，而是用错了地方。很多人可能会想着直接去监听原始 元素的 `keydown` 事件，结果发现根本捕获不到任何键盘导航行为。这并非开发者操作有误，而是 Select2 内部机制使然——它把原生 彻底藏了起来，自己渲染出一套 .select2-container 结构。

问题的核心在于，键盘焦点实际上落在 Select2 自己生成的搜索输入框或下拉列表中，而不是原始 。所以，原生绑定那一套方案，自然就失效了。

正确的做法：利用 Select2 原生事件系统

既然 Select2 重构了 DOM，那我们也就别绕弯子去操作

的 class 了。老老实实用它提供的官方事件系统，才是正道。下面是一套完整、可运行的解决方案，如果你正在被同样的问题困扰，直接照着来就行。

核心逻辑可以拆解为三步：

1. 先删掉那些错误的 `$("#country").on("keydown", ...)` 绑定——不是方案不行，而是监听的对象已经不对了；
2. 转而使用 Select2 官方的 `select2:open`、`select2:selecting` 和 `select2:select` 事件，它们才是真正和下拉交互挂钩的；
3. 高亮策略也要跟着换：不再依赖静态的 `:selected`，而是动态聚焦到当前键盘导航的选项上，确保每次按下方向键，高亮都能实时更新。

⚠️ 注意：Select2 其实自带了一套非常完善键盘交互——方向键移动光标、Enter 确认、Esc 关闭，全部默认支持。我们真正需要做的，只是在视觉层同步把当前聚焦项标识出来。

India Pakistan Afghanistan United States Canada

几个必须记住的关键点

• 别再去碰原生 ：Select2 的下拉菜单是一个完全独立的新 DOM（.select2-results__options），原来的 只用来做数据初始化。操作它相当于原地打转，根本到不了渲染层。
• 用官方定义的 CSS 类名：`.select2-results__option--highlighted` 是 Select2 自己为当前键盘聚焦项自动添加的标准类，覆盖它的样式就能实现高亮效果，省心又可靠。
• 理解事件的触发时序：`select2:open` 发生时下拉已完全展开，键盘导航就绪；`select2:selecting` 在用户按下回车或点击前触发；`select2:select` 则是选择动作完成后的信号。弄清楚这三者的顺序，就不会搞乱调用时机。
• 注意版本兼容性：优先使用 jQuery 3.6+ 搭配 Select2 v4.1.0+，旧版本的事件 API 差异较大，比如 v3.x 中的 `change` 事件已经不再推荐在 v4 中使用。
• 无障碍支持无负担：这套方法天然兼容屏幕阅读器和键盘导航标准，DOM 上的 ARIA 属性由 Select2 自动注入，无需额外开发。

一句话总结：既然选用了 Select2，那就顺着它的规则来。利用它的原生事件和 CSS 类，而不是试图绕过渲染机制，才能用最小的成本得到稳定、可访问且符合标准的键盘交互体验。