web-dev-qa-db-fra.com

Faites une sélection multiple pour ajuster sa hauteur en fonction des options sans barre de défilement

Apparemment, cela ne fonctionne pas:

   select[multiple]{
     height: 100%;
   }

cela permet au select d'avoir 100% de la hauteur de la page ...

auto ne fonctionne pas non plus, j'ai toujours la barre de défilement verticale.

D'autres idées?

enter image description here

htmlcsshtml-select
86
Alex

Je suppose que vous pouvez utiliser l'attribut size. Cela fonctionne dans tous les navigateurs récents.

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

Vous pouvez le faire en utilisant l'attribut size de la balise select. Si vous avez 8 options, alors vous le feriez comme ceci:

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

Vieux, mais cela fera ce que vous recherchez sans avoir besoin de jQuery. Le débordement caché supprime la barre de défilement et le javascript lui donne la bonne taille.

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

Et juste une petite quantité de javascript

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

Pour jQuery, vous pouvez essayer ceci. Je fais toujours ce qui suit et ça marche.

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

Vous ne pouvez le faire qu'en Javascript/JQuery, vous pouvez le faire avec le JQuery suivant (en supposant que vous ayez donné à votre sélection un identifiant de multiselect):

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

Démo: http://jsfiddle.net/AZEFU/

9
mattytommo

Je sais que la question est ancienne, mais comment le sujet n'est pas fermé, je vais aider.

L'attribut "taille" résoudra votre problème.

Exemple:

<select name="courses" multiple="multiple" size="30">
5
Victor
<select id="list">
  <optgroup label="Group">
    <option value="1">1</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

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

5
Andrii Nemchenko

Vous pouvez le faire avec javascript simple ...

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

... ou limite la hauteur jusqu'au nombre d'enregistrements ...

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

L'utilisation de l'attribut size est la solution la plus pratique. Toutefois, l'application de cet élément aux éléments select ne comporte que deux ou trois options.

  • Si vous définissez la valeur de l'attribut size sur "0" ou "1", la plupart du temps restituera un élément de sélection par défaut (liste déroulante).
  • Définir l'attribut size sur une valeur supérieure à "1" donnera généralement une liste de sélection avec une hauteur capable d'afficher au moins quatre éléments. Cela s'applique également aux listes ne contenant que deux ou trois éléments, ce qui entraîne un espace blanc non souhaité.

Simple JavaScript peut être utilisé pour définir automatiquement l'attribut size sur la valeur correcte, par exemple. voir ce violon .

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

Comme mentionné ci-dessus, cette solution ne résout pas le problème lorsqu'il n'y a que deux ou trois options.

1
Werner

friends: si vous récupérez les données depuis une base de données: vous pouvez appeler ceci $ registers = * _num_rows (Result_query) puis

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

Pour ajuster la taille (hauteur) de toutes les sélections multiples au nombre d'options, utilisez jQuery:

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

J'ai eu cette exigence récemment et utilisé d'autres posts de cette question pour créer ce script:

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

Pour supprimer la barre de défilement, ajoutez le CSS suivant:

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

Voici un extrait:

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