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


Aparentemente esto no funciona:

   select[multiple]{
     height: 100%;
   }

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

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

¿Alguna otra idea?

enter image description here


73
2018-03-30 13:24


origen


Respuestas:


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

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

95
2017-09-25 07:29



Puedes hacer esto usando el size atributo en el select etiqueta. Suponiendo que tiene 8 opciones, entonces lo haría como:

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

54
2018-03-13 08:15



Viejo, pero esto hará lo que está buscando sin necesidad de jquery. El desbordamiento oculto elimina la barra de desplazamiento y el javascript lo convierte en el 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;

18
2017-07-21 11:37



Solo puede hacer esto en Javascript / JQuery, puede hacerlo con el siguiente JQuery (suponiendo que le haya dado a su selección un id de multiselección):

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

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


10
2018-03-30 14:08



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

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

10
2017-08-06 11:22



Sé que la pregunta es antigua, pero que el tema no está cerrado. Daré mi ayuda.

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

Ejemplo:

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

7
2017-07-03 19:33



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

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


5
2018-02-09 11:16



Puedes hacer esto con javascript simple ...

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

3
2017-12-09 09:11



Utilizando el tamaño atributo es la solución más práctica, sin embargo, hay caprichos cuando se aplica a seleccionar elementos con solo dos o tres opciones.

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

JavaScript simple se puede usar para configurar el tamaño atribuir el valor correcto automáticamente, p. ver 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.


2
2017-08-19 14:17



amigos: si recuperas datos de un DB: puedes llamar esto  $ registers = * _num_rows (Result_query) entonces

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

1
2018-04-24 19:16



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

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

1
2017-07-30 22:53