在隐藏的div中select2全角？

Question

假设我在一个隐藏的div 中有一个select2框，如下所示：

<form >   
 <div id="agent007">
  <select name="slimy" id="slimy">
   <option>Good</option>
   <option>Bad</option>
  </select>
 </div>
</form>

选择框全角且div隐藏的情况

select{
  width:100%
}

div{
  display:none;
}

当我使div可见时，选择框没有全角。

$(document).ready(function(){
  $('#slimy').select2();
  $('#agent007').show();
});

如何制作一个select2框全隐藏在不可见容器中全宽？

这是一个jFiddle

Answer 1

您可以通过Select2 Configuration API以编程方式设置宽度。文档明确指出，有时这是您最好的选择：

Select2将尝试尽可能接近原始元素的宽度。有时这并不完美，在这种情况下，您可以手动设置宽度配置选项

$(document).ready(function(){
  $('#slimy').select2({'width':'100%'});
  $('#agent007').css('display','block');
});

select{
  width:100%
}

div{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<form >   
 <div id="agent007">
  <select name="slimy" id="slimy">
   <option>Good</option>
   <option>Bad</option>
  </select>
 </div>
</form>

注意：由于jQuery show()和堆栈片段之间存在冲突，因此我css('display','block')在这里使用了一种变通方法

Answer 2

根据作者的消息，显然需要销毁并重新初始化Select2。我也遇到过类似的情况，除了销毁后重新初始化之外没有任何作用。

您可能想要销毁然后重新初始化 Select2，以使宽度正确。

Select2 不完全支持动态创建选项。

$(document).ready(function() {
  $("#faty").select2();
  $('#slimy').select2();
  $('#agent007').show();
  $('#slimy').select2("destroy").select2();
});

工作片段：

$(document).ready(function() {
  $("#faty").select2();
  $('#slimy').select2();
  $('#agent007').show();
  $('#slimy').select2("destroy").select2();
});

$(document).ready(function() {
  $("#faty").select2();
  $('#slimy').select2();
  $('#agent007').show();
  $('#slimy').select2("destroy").select2();
});

select {
  width: 100%
}

div {
  display: none;
}

可能在 JSFiddle 工作：https://jsfiddle.net/49zg2x6w/