使用toggle（）时，选择2不是全宽或块

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代码的底部......

fatal error: unexpectedly found nil while unwrapping an Optional value

updated fiddle