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

显然这不起作用：

   select[multiple]{
     height: 100%;
   }

它使所选内容具有100％的页面高度...

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

还有其他想法吗？

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

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

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

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

旧的，但这不需要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;

对于jQuery，您可以尝试此操作。我总是做以下工作。

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

您只能在Javascript / JQuery中执行此操作，可以使用以下JQuery进行此操作（假设您为select指定了一个multiselect的ID）：

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

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

我知道这个问题很老，但是这个话题如何解决，我会给予帮助。

属性“大小”将解决您的问题。

例：

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

select可能包含optgroup其中每一行：

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

在此示例中，总计size为(1+1)+(1+2)=5。

您可以使用简单的javascript ...

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

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

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

要删除滚动条，请添加以下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>

使用尺寸属性是最实用的解决方案，在应用它来但有怪癖选择只有两个或三个选项元素。

• 将size属性值设置为“ 0”或“ 1”通常会呈现默认的select元素（下拉列表）。
• 将size属性设置为大于“ 1”的值将大部分呈现一个选择列表，该列表的高度能够显示至少四个项目。这也适用于只有两个或三个项目的列表，导致意外的空白。

可以使用简单的JavaScript 自动将size属性设置为正确的值，例如，参见此小提琴。

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

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

朋友：如果您从数据库中检索数据：您可以将其称为$ registers = * _num_rows（Result_query）然后

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

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

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

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

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

您可以先对选项标签进行计数，然后再为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>

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

这是一个示例包用法，在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' : ''),
]) !!}

包装：https：//laravelcollective.com/