select2插件点击外部不关闭下拉框的解决方法

select2插件点击外部不关闭下拉框的解决方法

select2是个在前端页面里很常用的替换html原生select的插件，正常情况下，在下拉框的外部点击会自动关闭下拉显示的。但是今天遇到一个情况就是无法关闭，考虑可能是因为我的页面框架是使用angularJS搭建的，而select2一跟jQuery更配，由于自己不是专业搞前端的，所以一些js库的不兼容也无从查起和解决。只能采取一些不是很专业的方式，好在最后解决了这个问题，其实方法就是自己给下拉框外部绑定一个click时间，使用代码关闭下拉框，有一点不常用的就是jQuery的not选择器，用它来排除点击的不是下拉框本身。
看JS代码如下，是不是很easy，见笑哈哈

1
2
3
$('body或者其他弹出框 总之就是最外层的大容器').on('click',':not(#s2id_你的select2插件的id)',function(){

        $('#你的select2元素的id').select2('close');

    });

其中的s2id_xxx就是select2把你的select2元素展开后的真实下拉框的dom id，可以用浏览器的开发者工具查看到。