进行多重选择以调整其高度以适应没有滚动条的选项

Question

显然这不起作用：

   select[multiple]{
     height: 100%;
   }

它使select具有100％的页面高度...

auto也不起作用，我仍然得到垂直滚动条。

还有其他想法吗？

Answer 1

我猜您可以使用 size 属性。它适用于所有最近的浏览器。

<select name="courses" multiple="multiple" size="30" style="height: 100%;">

Answer 2

您可以使用size标记中的select属性执行此操作。 假设您有8个选项，那么您可以这样做：

<select name='courses' multiple="multiple" size='8'>

Answer 3

旧的，但这将完成你所需要的，而不需要jquery。隐藏的溢出摆脱了滚动条，javascript使其大小合适。

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

只是少量的javascript

var select = document.getElementById('select');
select.size = select.length;

Answer 4

对于jQuery，你可以尝试这个。我总是做以下事情并且有效。

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});

Answer 5

您只能在Javascript / JQuery中执行此操作，您可以使用以下JQuery执行此操作（假设您已选择了多选的ID）：

$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});

演示： http://jsfiddle.net/AZEFU/

Answer 6

我知道这个问题已经过时了，但主题是如何关闭的我不会给予帮助。

属性＆＃34; size＆＃34;将解决您的问题。

示例：

<select name="courses" multiple="multiple" size="30">

Answer 7

<select id="list">
  <optgroup label="Group">
    <option value="1">1</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

https://jsfiddle.net/maars/ou5f3jzy/

Answer 8

你可以用简单的javascript ...

来做到这一点

<select multiple="multiple" size="return this.length();">

...或限制高度，直到记录数...

<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">

Answer 9

朋友： 如果从数据库中检索de数据： 你可以打电话给这个  $ registers = * _num_rows（Result_query） 然后

<select size=<?=$registers + 1; ?>"> 

Answer 10

使用 size 属性是最实用的解决方案，但是只有两个或三个选项应用于选择元素时会有一些怪癖。

• 将尺寸属性值设置为＆＃34; 0＆＃34;或＆＃34; 1＆＃34;将主要呈现默认选择元素（下拉列表）。
• 将size属性设置为大于＆＃34; 1＆＃34;将主要呈现一个高度能够显示至少四个项目的选择列表。这也适用于只有两个或三个项目的列表，导致意外的空白区域。

简单的JavaScript可用于将 size 属性自动设置为正确的值，例如见this fiddle。

$(function() {
    $("#autoheight").attr("size", parseInt($("#autoheight option").length)); 
});

如上所述，当只有两个或三个选项时，此解决方案无法解决问题。

Answer 11

我最近有这个要求，并使用此问题的其他帖子来创建此脚本：

$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})

Answer 12

要将所有多个选择的大小（高度）调整为选项数量，请使用jQuery：

$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})

Answer 13

要删除滚动条，请添加以下CSS：

select[multiple] {
    overflow-y: auto;
}

这是一个片段：

select[multiple] {
  overflow-y: auto;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple size="3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 14

这是Laravel示例：

{!! Form::select('subdomains[]', $subdomains, null, [
    'id' => 'subdomains',
    'multiple' => true,
    'size' => $subdomains->count(),
    'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}

Answer 15

您可以先计数选项标签，然后设置size属性的计数。 例如，在PHP中，您可以计算数组，然后对数组使用foreach循环。

<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
    <option value="valueItem">Name Item</option>
<?php } ?>
</select>

Answer 16

呈现选择框的方式由浏览器本身决定。因此，每个浏览器都会显示另一个高度的选项列表框的高度。 你不能影响那个。 您可以改变的唯一方法是从头开始进行自己的选择。