Select2 取消选择时出错答案

【问题标题】：Select2 Error on unselectSelect2 取消选择时出错
【发布时间】：2018-08-24 00:20:45
【问题描述】：

我正在使用带有multiple select 元素的select2 来创建一个更简单的用户界面，以便将许多项目添加到选择中。一切正常 - 我可以创建选择器、添加项目和删除项目，但是，在查看我的 Javascript 控制台日志时，我在取消选择项目时收到两个不同的错误。

未捕获的类型错误：无法读取未定义的属性“id”
未捕获的类型错误：无法读取 null 的属性“查询”

根据我的发现，这些错误是由以下几行引起的：

$('#eleId').on("select2:unselect", function(){
    $('#eleId').select2();
});

我已经删除了一些代码来尝试查明错误，但通常这个代码块会更新元素的一些属性，在select2({...}) 调用中设置。第一个错误是在选项的选择面板打开和关闭后第一次删除元素时给出，所以如果用户单击选择器，添加一个项目，然后删除该项目，第一个错误就会被触发。第二个错误发生在元素不是在选择面板打开和关闭之后立即被删除时，因此如果用户要添加三个项目，删除第一个会产生第一个错误，删除第二个和第三个会产生第二个错误每个项目都已删除。

如果我删除函数中的select2() 调用，错误就会消失，但错误似乎是由unselect 本身触发的，因为我在函数末尾添加了一条日志语句，它将打印在错误打印之前。

工作副本：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    </head>
    <body>
        <select multiple id='eleId'>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </body>
    <script>
        $(document).ready(function() {
            $('#eleId').select2();
        });
        $('#eleId').on("select2:unselect", function(){
            $('#eleId').select2();
        });
    </script>
</html>

【问题讨论】：

我认为问题出在您的("select2:unselect")，但不能保证任何事情，请尝试为问题创建一个有效的 sn-p，这样我们就有更好的机会帮助您
@CarstenLøvboAndersen 我添加了重复我的确切错误的代码
Yanman 你想在删除 1 或时完全清除它吗？因为你的问题有点不清楚你具体想要什么。但试试$('#eleId').select2('val', 'All');
所以在我的实际代码的其他地方，我正在比较两个选择的长度，如果它们的总和为 10，我将它们的 maximumSelectionLength 设置为它们的当前长度，这样用户就不能向其中任何一个添加更多项目。在取消选择时，我将 maximumSelectionLength 设置回 10 以允许添加更多项目。我删除了它，因为没有它会产生错误。

标签： jquery jquery-select2

【解决方案1】：

经过一番研究，我发现这个错误是由于select2在unselect事件后没有及时加载select元素，所以无法立即找到列出的属性。为了解决这个问题，我需要将.select2() 调用包装在setTimeout() 中：

$('#eleId').on("select2:unselect", function(){
    setTimeout(function(){
        $('#eleId').select2();
    });
});

这使 select2 在尝试访问此属性之前有足够的时间来加载元素。虽然这解决了错误，但在删除选择时，它会在选择面板上产生闪烁效果。为了解决这个问题，我修改了在此期间处理 opening 事件的方式：

$('#eleId').on("select2:unselect", function(){
    $(this).on('select2:opening', function(e) {
        e.preventDefault();
    });
    setTimeout(function(){
        $('#eleId').select2();
    });
    $(this).on('select2:unselect', function() {
        var sel = $(this);
        setTimeout(function() {
            sel.off('select2:opening');
        });
    });
});

【讨论】：

它帮助了我。非常感谢。超时有助于处理问题

【解决方案2】：

使用以下方法对我有用，错误消失了：

$('.class').on('select2:select', function (e) {...});

【讨论】：