代码之家 › 专栏 › 技术社区 › Adam

在隐藏的分区中选择2全角?

jquery-select2 css html javascript

Adam · 技术社区 · 7 年前

假设我有一个 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();
});

我怎么做选择2框隐藏在不可见容器中的全宽?

这是一个 jFiddle

4 回复 | 直到 7 年前

Praveen Kumar Purushothaman 7 年前

根据 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/

Eaten by a Grue kackleyjm 7 年前

您可以通过 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') 这里是一个工作区

Jithin Raj P R 7 年前

如果您需要CSS解决方案,可以尝试以下方法:

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

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

-1

Mr. Noddy 7 年前

现在检查更新的小提琴。

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

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

显示后可以初始化select2 div .