javascript - 在隐藏的 div 中选择 2 全 Angular ？

Question

假设我有一个 select2 box在这样一个隐藏的 div 中:

<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 box隐藏在一个看不见的容器中的全宽？

这是一个jFiddle

Answer 1

您可以通过 Select2 Configuration API 以编程方式设置宽度.文档清楚地表明，有时这是您的最佳选择:

Select2 will try to match the width of the original element as closely as possible. Sometimes this isn't perfect, in which case you may manually set the width configuration option

$(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') 作为解决方法