layui三方插件multiSelect实现下拉框多选踩坑纪实

今天在使用一个插件：multiSelect【多选列表】的时候，按照API操作，并封装成动态tpl组件后，显示结果却一直在报错。

场景：

如下格式的对象的数组

[

{
    "active": true,
 "avatarUrls": {
        "48x48": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=48",
 "24x24": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=24",
 "16x16": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=16",
 "32x32": "https://www.gravatar.com/avatar/64e1b8d34f425d19e1ee2ea7236d3028?d=mm&s=32"
 },
 "displayName": "admin",
 "email": "[email protected]",
 "id": "",
 "name": "[email protected]",
 "self": "http://192.168.21.236:18080/rest/api/2/user?username=admin",
 "url": "http://192.168.21.236:18080/rest/api/2/user?username=admin"
},

...

]

渲染的时候，将对象的name作为option标签的value值【注意了，坑来了】。

我们会发现，这里的name是：

[email protected]

其中@、.都是特殊字符，在正常使用seleted时候，页面报错：

这里是提示错误的表达式格式，jquery无法识别此选择器，竟然还有这种操作？

我查看了下引入的multiSelect.js的源码。分析了下产生的原因：

这个地方有使用属性选择器，我们的value值中含有特殊字符：@ .    

经过个人测试，

* . ? + $ ^ [ ] ( ) { } | \ / @ ~ % : , ; '

这些特殊字符是无法直接放在选择器里使用的，我们在封装流程或者组件的时候，切记要考虑这一点，为了让它使用，我们必须将它写成转义格式。下赋解决方案：

好了，不报错了：

这个事情告诉我们，即使是第三方封装好的插件，也会有各种坑！不要方，就是干!

重要的话要说三遍！

jQuery选择器里不能含有特殊字符！特殊字符需要转义！

jQuery选择器里不能含有特殊字符！特殊字符需要转义！

jQuery选择器里不能含有特殊字符！特殊字符需要转义！

赋：【multiSelect 多选】https://fly.layui.com/extend/multiSelect/