Question

初始化隐藏时，我无法让select2下拉列表适合父容器（折叠）。我知道这不是一个错误，因为select2无法计算父宽度。但我无法克服这一点。我需要100％给父母。

      $(function() {
     // var val = $('ul#myTab1').find('li.active').data('interest');
     var itemType = $('ul#myTab1').find('li.check').data('interest');
      alert(itemType);
    });

小提琴：here

有人可以帮忙吗？

Answer 1

实际上非常简单的解决方案：

<强> 1。仅CSS解决方案
给.select2 100％宽度并覆盖!important，如下所示：

.select2 {
  width: 100%!important; /* overrides computed width, 100px in your demo */
}

此处还有您更新的小提琴https://jsfiddle.net/1agwbfmy/6/

<强> 2。选择的样式标记
另一种方法，如documentation中所述，是为<select>元素赋予宽度style，它将从那里获取属性：
<select class="form-control" data-role="select2" style="width:100%">

第3。插件配置
最后，您可以在jQuery中调用插件时设置宽度（如old docs中所述）：

$('select[data-role="select2"]').select2({
    theme: 'bootstrap',
    width: '100%'
});

Answer 2

在config中使用width: '100%'属性。

$('[data-role="select2"]').select2({
   width: '100%',
   ...
});

select2 with bootstrap主题 - 内部崩溃

2 个答案: