Realice una selección múltiple para ajustar su altura para adaptarse a las opciones sin barra de desplazamiento

Aparentemente esto no funciona:

   select[multiple]{
     height: 100%;
   }

hace que la selección tenga un 100% de altura de página ...

auto tampoco funciona, todavía obtengo la barra de desplazamiento vertical.

¿Alguna otra idea?

Supongo que puedes usar el sizeatributo. Funciona en todos los navegadores recientes.

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

Puede hacer esto usando el sizeatributo en la selectetiqueta. Suponiendo que tiene 8 opciones, lo haría así:

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

Viejo, pero esto hará lo que buscas sin necesidad de jquery. El desbordamiento oculto elimina la barra de desplazamiento y el javascript la hace del tamaño correcto.

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

Y solo una pequeña cantidad de javascript

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

Para jQuery puedes probar esto. Siempre hago lo siguiente y funciona.

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

Solo puede hacer esto en Javascript / JQuery, puede hacerlo con el siguiente JQuery (suponiendo que le haya dado a su selección una identificación de selección múltiple):

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

Demostración: http://jsfiddle.net/AZEFU/

Sé que la pregunta es antigua, pero como el tema no se cierra, daré mi ayuda.

El atributo "tamaño" resolverá su problema.

Ejemplo:

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

selectpodría contener lo optgroupque toma una línea cada uno:

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

En este ejemplo, el total sizees (1+1)+(1+2)=5.

Puede hacer esto con un simple javascript ...

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

... o limitar la altura hasta el número de registros ...

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

Para eliminar la barra de desplazamiento, agregue el siguiente CSS:

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

Aquí hay un fragmento:

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 el atributo de tamaño es la solución más práctica, sin embargo, existen peculiaridades cuando se aplica a elementos seleccionados con solo dos o tres opciones.

• Establecer el valor del atributo de tamaño en "0" o "1" representará principalmente un elemento de selección predeterminado (menú desplegable).
• Establecer el atributo de tamaño en un valor mayor que "1" generará principalmente una lista de selección con una altura capaz de mostrar al menos cuatro elementos. Esto también se aplica a las listas con solo dos o tres elementos, lo que genera espacios en blanco no deseados.

Se puede usar JavaScript simple para establecer el atributo de tamaño en el valor correcto automáticamente, por ejemplo, vea este violín .

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

Como se mencionó anteriormente, esta solución no resuelve el problema cuando solo hay dos o tres opciones.

amigos: si recupera los datos de una base de datos: puede llamar a esto $ registros = * _num_rows (Result_query) entonces

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

Recientemente tuve este requisito y usé otras publicaciones de esta pregunta para crear este script:

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

Para ajustar el tamaño (altura) de todas las selecciones múltiples al número de opciones, use jQuery:

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

Primero puede contar la etiqueta de opción y luego establecer el recuento para el atributo de tamaño. Por ejemplo, en PHP puede contar la matriz y luego usar un bucle foreach para la matriz.

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

El navegador determina la forma en que se representa un cuadro de selección. Entonces, cada navegador le mostrará la altura del cuadro de lista de opciones en otra altura. No puedes influir en eso. La única forma de cambiar eso es hacer una selección propia desde cero.

Aquí hay un ejemplo de uso del paquete, que es bastante popular en la comunidad de 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' : ''),
]) !!}

Paquete: https://laravelcollective.com/