Select2带搜索下拉框上下箭头按键选择失效问题求助

你的问题核心在于错误操作了原生<select>的<option>元素，而Select2的下拉选项是动态生成的独立DOM结构，同时自定义的键盘事件没有触发Select2的选择逻辑，甚至干扰了它的默认键盘导航行为。

修正方案 #

Select2本身自带完整的键盘导航功能（上下箭头切换选项、回车确认选择），无需手动绑定上下箭头事件。只需移除自定义键盘监听代码，调整高亮逻辑到Select2的动态元素上即可。

修正后的完整代码：

<!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-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <style>
        /* 针对Select2下拉选项设置高亮样式 */
        .select2-results__option.highlight {
            background-color: yellow;
        }
    </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='div1'>
                    <option value='1'>India</option>
                    <option value='2'>America</option> 
                </optgroup>
                <optgroup label='div2'>
                    <option value='3'>Pakistan </option>
                    <option value='4'>Afghanistan</option> 
                </optgroup>
            </select>
            <br/>
            <input type="submit" name="save" value="submit">
        </form>
    </div>

    <script>
        $(document).ready(function(){
            $("#country").select2();

            $("#country").on("select2:open", function (e) {
                // 打开下拉框时，高亮当前选中的选项
                highlightSelectedInSelect2();
            });

            $("#country").on("select2:select", function (e) {
                // 选中选项后同步高亮状态
                highlightSelectedInSelect2();
            });

            // 监听Select2键盘导航的选中过程，同步高亮
            $("#country").on("select2:selecting", function (e) {
                $(".select2-results__option").removeClass("highlight");
                $(e.params.args.data.element).closest(".select2-results__option").addClass("highlight");
            });

            function highlightSelectedInSelect2() {
                $(".select2-results__option").removeClass("highlight");
                $(".select2-results__option[aria-selected='true']").addClass("highlight");
            }
        });
    </script>
</body>
</html>

关键修改点 #

• 移除原生<select>的keydown事件监听，恢复Select2默认的键盘导航逻辑（上下箭头切换、回车确认）。
• 将高亮样式目标改为Select2生成的.select2-results__option元素，而非原生<option>。
• 通过Select2专属事件（select2:open/select2:select/select2:selecting）同步高亮状态，确保UI与选中状态一致。

内容的提问来源于stack exchange，提问作者Jangam Ranjeeth