我使用带有 multiple select 元素的 select2 来创建一个更简单的用户界面，以便将许多项目添加到选择中。一切正常 - 我可以创建选择器、添加项目和删除项目，但是，当查看我的 Javascript 控制台日志时，我在取消选择项目时收到两个不同的错误。
-
Uncaught TypeError: Cannot read property 'id' of undefined
-
Uncaught TypeError: Cannot read property 'query' of 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 事件后没有及时加载 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');
});
});
});
关于jquery - Select2 取消选择时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45713963/