jquery - 使用toggle()时Select2不是全宽或 block

Question

我有一些选择是 Select2:s (使用插件 select2)。我想要的是，当第一个 select2 更改并且它是特定选项时，它将显示另一个 select2。首先，当页面加载时，所有隐藏的 select2 都被 jQuery 的 .toggle() 隐藏。这是因为我使用 bootstrap 并将每个选择都放在 .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