jquery – 如何更改select2框高度

我喜欢从 https://github.com/ivaynberg/select2的select2框
我使用格式：选项来格式化每个元素，它看起来不错。

一切都很好，除非所选元素大于由于图像的选择框的高度。

我知道如何改变宽度，但如何改变高度，以便在选择元素后，它显示完整的东西(约150px)

这是我的开始：

<script>
 $("#selBoxChild").select2({
                      matcher: function(term,text) { 
                          var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
                          return t.toupperCase().indexOf(term.toupperCase()) >= 0; 
                      },formatResult: formatChild,formatSelection: formatChild,escapeMarkup: function(m) { return m; }
                  });
</script>

这里是我的选择框

<select id="selBoxChild" style="width: 300px; height: 200px">
       <option value="">No child attached</option>       
       </select>

澄清：我不想让每个选项的高度改变
我在寻找选择框，以在您选择一个孩子后更改高度。

所以当页面第一次加载它说“没有孩子选择”
当你点击下拉菜单并选择一个孩子，你会看到孩子的形象。
现在我需要选择框来展开！否则，儿童的图片被切断。

有人明白吗？

解决方法

你可以做一些简单的css。
从我读到的，你想设置元素的高度与类“select2-choices”。

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

这应该给你设置的高度150px，它会滚动，如果需要。只需调整高度，直到您的图像适合所需。

您还可以使用css设置select2-results(选择控件的下拉部分)的高度。

ul.select2-results {
 max-height: 200px;
}

200px是默认高度，因此更改它的下拉所需的高度。

原文地址：https://www.jb51.cc/jquery/183794.html