jQuery选择带方括号数组命名的select元素初始化select2报错问题

错误原因 #

报错的核心原因是[]属于CSS属性选择器的保留特殊字符，直接写在属性匹配值中会被解析器识别为选择器语法的一部分，无法作为id值的普通字符处理，因此触发语法错误。

正确修复方案 #

最简单的解决方式是将属性选择器的匹配值用引号包裹，让解析器将其识别为普通字符串即可，修改后的选择器如下：

$("#modal-course-grades-list-body select[id^='new_grades'][id$='[course]']").select2({
    // 你原有select2的所有配置保持不变即可
    placeholder: "Select A Course",
    ajax: {
        url: "{{route('baadmin.students.get_student_bursary_enrolment_courses')}}",
        type: "post",
        dataType: 'json',
        delay: 250,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: function (params) {
            return {
                parent_id: $("#student_bursary_enrolment_id").val(),
                search: params.term // search term
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true,
        tags: true,
        createTag: function (params) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            }
        },
        templateResult: function (data) {
            var $result = $("<span></span>");
            $result.text(data.text);
            if (data.newOption) {
                $result.append(" <em>(new)</em>");
            }
            return $result;
        }
    }
});

可选替代方案（特殊字符转义） #

你也可以通过双反斜杠转义方括号实现相同的匹配效果，不过可读性不如直接加引号的方案：

$("#modal-course-grades-list-body select[id^=new_grades][id$=\\[course\\]]").select2({
    // 原有配置保持不变
})

动态新增元素注意事项 #

如果后续有动态新增的行需要初始化，不要重复执行全局选择器代码，建议在新增行的逻辑中，拿到新插入的DOM节点后单独查找该节点下的课程select执行初始化，避免重复渲染已生效的select2元素。

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