在前端开发中，Select2 是一个非常优秀的下拉选择框解决方案，受到了广泛的应用。然而，在使用 Select2 过程中，我们可能会遇到一个比较麻烦的问题：当 select 元素被隐藏时，Select2 无法正确计算其宽度。
问题描述
假设我们有一个页面需要通过两个下拉选择框实现联动筛选功能。为了更好地用户体验，我们可能会在页面初始化时将第二个下拉选择框先隐藏（display:none），并根据第一个下拉选择框的选项来设置第二个下拉选择框的选项。当第一个下拉选择框选项改变时，我们再展示第二个下拉选择框。
这种情况下，如果我们使用 Select2 来渲染下拉框，那么，当第二个下拉选择框被显示出来时，其宽度可能会变得很小，导致显示异常，影响用户体验。
问题原因
这是因为 Select2 是基于原生的 <select> 元素来封装下拉选择框的。在初始化 Select2 时，它会获取 <select> 元素的 width 和 padding，来计算 Select2 的最终宽度。但是，当 <select> 元素被隐藏时，其 width 和 padding 实际上都会变成 0，这样计算出来的 Select2 宽度就会异常。
解决方案
为了解决这个问题，我们需要在计算 Select2 的宽度时，确保 <select> 元素是处于显示状态的。具体做法是，在初始化 Select2 之前，将 <select> 元素先显示出来（例如通过 visibility:hidden），然后再计算它的宽度和 padding，并将其隐藏起来，最后再初始化 Select2。
以下是示例代码：
-- -------------------- ---- ------- ---- ---- --- ------- ------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- --------- ------- ------------ ---------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- ---------
/* CSS */
#select2 {
visibility: hidden;
}-- -------------------- ---- -------
-- ----------
------------ -
--- ------- - --------------
--- ------- - --------------
-- --- -------
------------------------- -----------
-- -- ------- ---
--- ----- - ---------------------
--- ----------- - --------------------------------------
--- ------------ - ---------------------------------------
--- ------------- - ----- - ----------- - -------------
-- -- -------
------------------------- ----------
-- --- -------
-----------------
------ --------------
------------------------ --------
---
-- -- ------- - ------ ----- ------- ---
-------------------- ---------- -
-- ---
---
---总结
在使用 Select2 渲染下拉选择框时，要注意当 <select> 元素被隐藏时，Select2 无法正确计算其宽度的问题。为了解决这个问题，需要在初始化 Select2 前，确保 <select> 元素是处于显示状态的，并通过计算其宽度和 padding，来获取正确的 Select2 宽度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30616