javascript - 选择 2 : cannot read property query of null

Question

我已经创建了这样的 javascript

$(document).on("select2:open", ".provider_suggestion", function() {
    $(this).select2({
        minimumInputLength: 2,
        ajax: {
            url: "../include/suggestion/provider_name.php",
            dataType: 'json',
            delay: 250,
            data: function(params){ return { q: params.term }; },
            processResults: function (data, page) { return { results: data }; },
            cache: true
        }
    });
});

并像这样创建选择的 html 输入

<select id="c_providers" name="c_providers" class="provider_suggestion" style="width:100%"></select>

当页面加载时，我点击选择输入。

我打开浏览器控制台，它提到了

Uncaught TypeError: Cannot read property 'query' of null

这个问题我还是不太明白。

Answer 1

您必须已经在您提供的代码片段之前的某处初始化了 select2，否则我希望 select2:open 监听器永远不会触发并导致您的问题。当我用 fiddle 复制这种情况并查看 select2 源代码时，select2 似乎在提示 dataAdapter 为空，这一定是这个双 select2() 调用的副作用，或者.select2() 调用在具有意外上下文的监听器内部...或者其他原因，没有时间或兴趣探索根本原因。

无论如何，将 .select2() 调用移出监听器(并移除空的监听器)可以解决问题。根据您的问题中可用的有限信息，似乎根本不需要使用此监听器，至少您使用它的方式是这样。一个简单的工作示例在 this JSfiddle 中。 ，其中与原始代码的唯一真正区别是删除了监听器包装(以及 AJAX 调用的模拟)。所以，尝试类似的东西

$('#c_providers').select2({
    minimumInputLength: 2,
    ajax: {
        url: "../include/suggestion/provider_name.php",
        dataType: 'json',
        delay: 250,
        data: function(params){ return { q: params.term }; },
        processResults: function (data, page) { return { results: data }; },
        cache: true
    }
});

作为此 #c_providers 元素的唯一 select2 初始化。