Faça várias seleções para ajustar sua altura para caber nas opções sem barra de rolagem

Aparentemente, isso não funciona:

   select[multiple]{
     height: 100%;
   }

faz com que a seleção tenha 100% da altura da página ...

auto também não funciona, ainda recebo a barra de rolagem vertical.

Alguma outra ideia?

Eu acho que você pode usar o sizeatributo. Funciona em todos os navegadores recentes.

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

Você pode fazer isso usando o sizeatributo na selecttag. Supondo que você tenha 8 opções, você faria assim:

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

Antigo, mas isso fará o que você procura sem a necessidade de jquery. O estouro oculto remove a barra de rolagem e o javascript a torna do tamanho certo.

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

E apenas uma pequena quantidade de javascript

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

Para jQuery, você pode tentar isso. Eu sempre faço o seguinte e funciona.

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

Você só pode fazer isso em Javascript / JQuery, você pode fazer isso com o seguinte JQuery (supondo que você forneceu ao seu select um id de multiselect):

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

Demo: http://jsfiddle.net/AZEFU/

Sei que a dúvida é antiga, mas como o tópico não está fechado darei minha ajuda.

O atributo "tamanho" resolverá seu problema.

Exemplo:

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

selectpode conter o optgroupque leva uma linha cada:

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

Neste exemplo, o total sizeé (1+1)+(1+2)=5.

Você pode fazer isso com javascript simples ...

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

... ou limite a altura até o número de registros ...

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

Para remover a barra de rolagem, adicione o seguinte CSS:

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

Aqui está um snippet:

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>

Usar o atributo size é a solução mais prática, no entanto, existem peculiaridades quando ele é aplicado para selecionar elementos com apenas duas ou três opções.

• Definir o valor do atributo size para "0" ou "1" renderizará principalmente um elemento de seleção padrão (lista suspensa).
• Definir o atributo de tamanho com um valor maior que "1" renderizará principalmente uma lista de seleção com uma altura capaz de exibir pelo menos quatro itens. Isso também se aplica a listas com apenas dois ou três itens, levando a espaços em branco não intencionais.

JavaScript simples pode ser usado para definir o atributo de tamanho para o valor correto automaticamente, por exemplo, veja este violino .

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

Conforme mencionado acima, esta solução não resolve o problema quando há apenas duas ou três opções.

amigos: se você recuperar os dados de um banco de dados: você pode chamar isso de $ registers = * _num_rows (Result_query) então

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

Tive esse requisito recentemente e usei outras postagens desta pergunta para criar este script:

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

Para ajustar o tamanho (altura) de todas as seleções múltiplas para o número de opções, use jQuery:

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

Você pode contar a tag de opção primeiro e, em seguida, definir a contagem para o atributo de tamanho. Por exemplo, em PHP você pode contar o array e então usar um loop foreach para o array.

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

A forma como uma caixa de seleção é renderizada é determinada pelo próprio navegador. Assim, cada navegador mostrará a altura da caixa de lista de opções em outra altura. Você não pode influenciar isso. A única maneira de mudar isso é fazer sua própria seleção do zero.

Aqui está um exemplo de uso de pacote, que é bastante popular na comunidade 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' : ''),
]) !!}

Pacote: https://laravelcollective.com/