Question

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

我从单独的ajax调用中获取数据，在done部分中我创建了select2元素。

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

宽度完全搞砸了。

我是否会触发重新渲染？

我也尝试按样式强制宽度，但没有效果。

HTML

 <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>

JS

$(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();
  });

});

这是一个带有示例代码的jsfiddle：https://jsfiddle.net/soulflyman/m32br8vn/

如果隐藏，则Select2下拉列表无法呈现正确

0 个答案: