Jquery 如果隐藏，则Select2下拉列表不会正确渲染

在我的代码中有一个select2元素

我从一个单独的ajax调用中获取数据，并在“完成”部分创建select2元素

只要select元素可见，这就可以正常工作。如果包装div在我创建select2元素之前被jQuery隐藏，它将不会正确呈现

宽度完全弄乱了

是否有类似于我触发的重新渲染

我还试图通过样式强制宽度，但没有效果

html

---

下面是一个带有示例代码的JSFIDLE:

JSFIDLE with modified example@TechVision这似乎是唯一合理的方法，谢谢。

 <div id="ddWrapper1" style="width: 400px, height 50px">
  dd1
  <select id="dd1" style="width: 100%"></select>
</div>

<div id="ddWrapper2" style="width: 400px, height 50px">
  dd2
  <select id="dd2" style="width: 100%"></select>
</div>

<button id='btnToggle'>
  toggle wrapper visibility
</button>

$(document).ready(function() {
  $('#ddWrapper2').hide();

  var ddDate = [{
    id: 1,
    text: 'some item'
  }, {
    id: 2,
    text: 'even more items'
  }, {
    id: 3,
    text: 'oh no'
  }, {
    id: 4,
    text: 'that is a really long item name...'
  }];

  $('#dd1').select2({
    data: ddDate,
    allowClear: true,
    multiple: true,
    placeholder: '[dd1] select some items'
  });

  $('#dd2').select2({
    data: ddDate,
    allowClear: true,
    multiple: true,
    placeholder: '[dd2] select some items'
  });

  $('#btnToggle').on('click', function() {
    $('#ddWrapper1').toggle();
    $('#ddWrapper2').toggle();
  });

});