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

Question

在下拉菜单中使用 Bootstrap 并使用相对简单的代码:

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

当下拉列表不可见并执行 select2 函数时——结果不正确，如下所示:

当下拉列表可见时——结果 100% 正确:

Answer 1

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

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

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

另一种解决方案是在通过监听 the shown event 显示下拉列表之前不初始化 Select2由 Bootstrap 触发。