Select2字段未在Boostrap选项卡中按预期方式呈现（在加载时显示：无）

Question

此问题是一个未解决的问题，如果有人知道更好的解决方案，则我需要其解决方法。此问题可以在https://github.com/select2/select2/issues/4220

上找到。

问题 在Bootstrap选项卡中使用Select2字段时，如果该字段在加载时位于隐藏选项卡之一中，则所得字段将不会按预期显示。

重现问题的步骤

创建2个Boostrap选项卡，其中一个处于活动状态。每个标签创建1个新的Select2字段。

预期行为和实际行为

执行此操作时，在加载DOM时，在活动选项卡上，该字段将采用100％的宽度，并在标签下方的第二行显示，这是预期的行为。

在加载DOM时，在隐藏的标签上，该字段占100像素（这与我所做的所有测试都是一致的），并显示在标签旁边。

此外，“多个”字段的占位符文本也以100px呈现。因此，即使使用$ .fn.select2.defaults.set（“ width”，null）;之类的“ hack”，多个字段的占位符仍以100px宽度显示（这在标签4中的JSFiddle中显示）< / p>

$(function() {
  // Activate Select2
  $('#tab1_select2_single').select2();
  $('#tab1_select2_multiple').select2();
  $('#tab2_select2_single').select2();
  $('#tab2_select2_multiple').select2();
  $('#tab3_select2_single').select2();
  $('#tab3_select2_multiple').select2();

  // Width hack
  $.fn.select2.defaults.set("width", '100%');
  $('#tab4_select2_single').select2();
  $('#tab4_select2_multiple').select2();

  // Everything is loaded, hide the tab2
  $('#tab3').removeClass('active');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>


<div class="container">
  <div class="container">
    <h1>
          Select2 Tests
        </h1>

    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a></li>
        <li role="presentation" class=""><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab" aria-expanded="false">Tab 2</a></li>
        <li role="presentation" class=""><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab" aria-expanded="false">Tab 3</a></li>
        <li role="presentation" class=""><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab" aria-expanded="false">Tab 4</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="tab1">
          <div class="alert alert-success">
            This tab is "active" when loading and stay active afterwards. Select2 is displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab1_select2_single">Tab1 Select2 Single</label>
            <select id="tab1_select2_single" data-placeholder="Please select Single State - Tab1" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab1_select2_multiple">Tab1 Select2 Multiple</label>
            <select id="tab1_select2_multiple" data-placeholder="Please select Multiple State - Tab1" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab2">
          <div class="alert alert-danger">
            This tab is not "active" when loading. Select2 is <strong>not</strong> displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab2_select2_single">Tab2 Select2 Single</label>
            <select id="tab2_select2_single" data-placeholder="Please select Single State - Tab2" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab2_select2_multiple">Tab2 Select2 Multiple</label>
            <select id="tab2_select2_multiple" data-placeholder="Please select Multiple State - Tab2" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane active" id="tab3">
          <div class="alert alert-warning">
            This tab is "active" when loading. It is de-actived with <code>$('#tab3').removeClass('active');</code> when the DOM is ready. Select2 is displayed as expected.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab3_select2_single">Tab3 Select2 Single</label>
            <select id="tab3_select2_single" data-placeholder="Please select Single State - Tab3" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab3_select2_multiple">Tab3 Select2 Multiple</label>
            <select id="tab3_select2_multiple" data-placeholder="Please select Multiple State - Tab3" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="tab4">
          <div class="alert alert-danger">
            This tab is not "active" when loading. Both field have a small "hack" (<code>$.fn.select2.defaults.set("width", '100%');</code>) to set the width.
          </div>
          <div class="form-group">
            <label class="control-label" for="tab4_select2_single">Tab4 Select2 Single</label>
            <select id="tab4_select2_single" data-placeholder="Please select Single State - Tab4" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tab4_select2_multiple">Tab3 Select2 Multiple</label>
            <select id="tab4_select2_multiple" data-placeholder="Please select Multiple State - Tab4" multiple="" class="form-control">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</div>
<!-- /.container -->