Select2错误取消选择

问题描述：

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

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>

我认为这个问题是你的'（“选择2：取消选择”）'，但不能承诺什么，试图创建的工作片段问题，那么我们有更好的机会帮助你 –

@CarstenLøvboAndersen我已经添加了代码来重复我的确切错误 – yanman1234

Yanman你想完全清除1吗？因为你的问题有点不清楚你想要什么。但尝试用'$（“＃eleId”）选择2（“VAL”，“所有”）;' –

答

做一些更多的研究后，我发现这个错误是由非选择事件后选择2不加载选择元素在时间上造成的，所以它不能立即找到列出的属性。为了解决这个问题，我需要换一个setTimeout()的.select2()通话这样：

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

这给选择2只足够的时间来访问此属性之前加载的元素。虽然这可以解决这些错误，但是在删除选择时，它会在选择面板上产生闪烁效果。为了解决这个问题我修改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'); 
     }); 
    }); 
});

Select2错误取消选择

相关推荐