Question

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

<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将尝试尽可能匹配原始元素的宽度。 有时这并不完美，在这种情况下，您可以手动设置宽度配置选项

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

根据作者的a message，很明显，您需要销毁并重新初始化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();
});

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>
  <select name="faty" id="faty">
    <option>Good</option>
    <option>Bad</option>
  </select>

  <div id="agent007">
    <select name="slimy" id="slimy">
      <option>Good</option>
      <option>Bad</option>
    </select>
  </div>
</form>

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

Answer 3

如果您想要CSS解决方案，可以尝试以下操作：

select,
.select2-container { 
  width: 100% !important;
}

为您工作的小提琴链接-https://jsfiddle.net/jithinrajpr7/26uroj7b/19/

Answer 4

现在检查更新的小提琴。

https://jsfiddle.net/26uroj7b/9/

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

您可以在显示div之后初始化select2。

在隐藏的div中select2全角？

4 个答案: