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

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

您只能在 Javascript/JQuery 中执行此操作，您可以使用以下 JQuery (假设您为 select 设置了 multiselect 的 id) :

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

演示: Http://jsfiddle.net/azefu/

I guess you can use the size attribute. It works in all recent browsers.

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

您可以使用 select标记中的 size属性来完成这项工作。 Supposing you have 8 options, then you would do it like:

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

朋友: 如果你从数据库中检索数据: 你可以称之为 $register = * _ num _ rows (Result _ query) 那么

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

对于 jQuery，你可以试试这个。

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

我知道这个问题已经很老了，但是这个话题怎么还没有结束，我会给予我的帮助。

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

例如:

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

使用 size属性是最实用的解决方案，但是当它只应用于 选择元素(只有两个或三个选项)时，就会出现一些问题。

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

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

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

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

Old, but this will do what you're after without need for jquery. The hidden overflow gets rid of the scrollbar, and the javascript makes it the right size.

<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>

And just a tiny amount of javascript

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

I had this requirement recently and used other posts from this question to create this script:

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

你可以用简单的 javascript 做到这一点..。

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

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

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

select可以包含 optgroup，每个 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。

要将所有多个选项的大小(高度)调整为选项的数量，请使用 jQuery:

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

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

下面是一个在 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' : ''),
]) !!}

Package: https://laravelcollective.com/

您可以先计算选项标记，然后设置 size 属性的 count。 例如，在 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>