select2.js 和 selected.js 未在下拉菜单上正确呈现

Question

在下拉菜单中使用引导程序并使用相对简单的代码：

$('#platform-picker').select2()

当下拉菜单不可见并执行 select2 函数时——结果不正确，如下所示：

当下拉菜单可见时——结果 100% 正确：

Answer 1

Select2 和 Chosen 都依赖于浏览器为选择框的宽度提供准确的值，以便设置所显示的选择框的大小。 当框最初隐藏时（例如当下拉列表关闭时），浏览器给出的宽度通常为null或0 ，这要么没有帮助（什么是null宽度？）要么完全错误（宽度为0 ？真的？ ）。

Select2 的解决方案是在初始化之前在<select>元素中设置内嵌宽度。 Select2 将在设置新框的宽度时使用此值。

<select style="width: 100%"></select>

另一种解决方案是在通过侦听 Bootstrap 触发的shown事件显示下拉列表之前不初始化 Select2。