使用 toggle() 时选择 2 不是全宽或块

Question

我有一些 select 是 Select2:s（使用插件 select2）。我想要的是当第一个 select2 被更改并且它是一个特定的选项时，它会显示另一个 select2。首先，当页面加载时，所有隐藏的 select2 都被 jQuery 的 .toggle() 隐藏。这是因为我使用 bootstrap 并且每个 select 都在一个 .form-group 中，我不想使用比需要更多的类。因此我使用这个：

$("#secondSelect").parents(".form-group").toggle();

然后我使用此代码显示下一个 select2:

$("#firstSelect").on("change", function(e) {
    if ($(this).val() == "specificValue") {
        $("#secondSelect").parents(".form-group").toggle();
    } else {
        $("#secondSelect").parents(".form-group").toggle();
    }
});

但问题是第二个 select2 在 .form-group 中没有正确显示。它看起来像这样：

不是全角，与标签一致。

奇怪的是，当我使用 chrome 检查器并使用控制台输入 .toggle() 代码时，这不是问题。为什么显示不正确？

JSFIDDLE

Answer 1

出现此问题是因为当您调用 .select2 时，元素被隐藏，因此没有为其设置宽度。在隐藏元素之前初始化，宽度将正确解析。

将这些行移到您的 js 代码的底部...

$("#program").parents(".form-group").toggle();
$("#year").parents(".form-group").toggle();

updated fiddle

使用 toggle() 时选择 2 不是全宽或块

Select2 not full width or block when using toggle()

jquery

twitter-bootstrap

select2