select2.js和selected.js在下拉菜单中无法正确呈现

Question

在下拉菜单中使用bootstrap并使用相对简单的代码：

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

当下拉列表不可见且执行select2函数时 - 结果不正确，如下所示：

当下拉列表可见时 - 结果100％正确：

Answer 1

Select2和Chosen都依赖浏览器为选择框的宽度提供准确的值，以便设置显示的宽度。当该框最初被隐藏时（例如关闭下拉列表时），浏览器提供的宽度通常为null或0，这可能没有帮助（＆＃39; sa {{1} }宽度？）或完全错误（宽度为null？真的吗？）。

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

<select>

另一种解决方案是不要初始化Select2，直到通过监听Bootstrap触发的the shown event显示下拉列表。