Faire de multiples sélectionnez pour ajuster sa hauteur pour s'adapter à des options sans barre de défilement

Apparemment cela ne fonctionne pas:

   select[multiple]{
     height: 100%;
   }

il fait le sélectionner avez 100% de la hauteur de la page...

auto cela ne fonctionne pas, j'obtiens toujours la barre de défilement verticale.

D'autres idées?

Faire de multiples sélectionnez pour ajuster sa hauteur pour s'adapter à des options sans barre de défilement

Je pense que vous êtes coincé avec l'aide de javascript. Je ne crois pas qu'il y a un moyen d'avoir une boîte de sélectionner automatiquement stretch css uniquement pour contenir le contenu.

InformationsquelleAutor Alex | 2012-03-30

111

Je suppose que vous pouvez utiliser le size attribut. Il fonctionne dans tous les navigateurs récents.
```
<select name="courses" multiple="multiple" size="30" style="height: 100%;">
```
- Salut, Comment est-ce différent de ce qui a été dit dans la question de ne pas travailler?
- Salut, c'est différent parce qu'il incarne l'attribut de taille. La première question se rapporte uniquement à la hauteur de l'attribut
- Ah ok. Il n'est pas réellement faire la boîte de rétrécir à la taille du contenu, vous devez définir manuellement le numéro de la valeur de la taille, qui est très bien si vous savez combien il y a d'options, mais plus d'un problème si il y a une dynamique nombre d'options. Dans ce cas, vous auriez à régler redimensionner la taille de l'attribut lors de la peuplé de la boîte. Aujourd'hui, je vois, merci pour la clarification.
- Oh, allez! Si vous êtes "remplissage" sur le serveur, alors vous savez combien il y en aura. Et si vous le pouvez "remplir" à l'aide d'AJAX, la modification d'un modeste attribut sera pas de défi. Vous pouvez même compter les options en JS après le "peuplement".
- count($options)
- $('select.extensible').each(function() { $(this).attr('taille', $(this).find('option').la longueur) }) – Francesc Rosàs Sep 5 '12 à 16:43 Un commentaire sur une autre réponse.
- Il a travaillé, mais aussi la hauteur de la <select> être augmenté que par la taille, et comme un résultat de fausser ma mise en page. ;( –
InformationsquelleAutor Alex
61

Vous pouvez faire cela en utilisant la size attribut dans la select tag.
En supposant que vous avez 8 options, puis vous faire comme:
```
<select name='courses' multiple="multiple" size='8'>
```
- Il a travaillé, mais aussi la hauteur de la <select> être augmenté que par la taille, et comme un résultat de fausser ma mise en page. ;(
InformationsquelleAutor awc

Vieux, mais cela va faire ce que vous êtes après, sans besoin de jquery. Le caché dépassement de se débarrasser de la barre de défilement, et le javascript en fait 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 qu'une très petite quantité de javascript

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

InformationsquelleAutor Jarrod

12

Pour jQuery vous pouvez essayer cette. Je fais toujours la suite et ça fonctionne.
```
$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});
```
InformationsquelleAutor Abhishek Sharma
9

Vous ne pouvez le faire en Javascript/JQuery, vous pouvez le faire avec la suite de JQuery (en supposant que vous avez donné à votre sélectionnez un id de sélection multiple):
```
$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});
```
Démo:
http://jsfiddle.net/AZEFU/
- La même idée sans compter sur la hauteur de la ligne: $('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })
- Parfait! Dommage c'est caché dans un commentaire au lieu d'être la accepté de répondre.
InformationsquelleAutor mattytommo
5

Je sais que la question est ancienne, mais la façon dont le sujet n'est pas fermé, je vais vous donner mon aide.

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

Exemple:
```
<select name="courses" multiple="multiple" size="30">
```
- Il n'existe toujours 30 options dans le select.
InformationsquelleAutor Victor
5
```
<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/
- À la fois les réponses ci-dessus sont techniquement correct, mais c'est la plus intéressante réponse.
- Je préfère cette réponse car je ne sais pas combien d'articles apparaissent dans la liste. Mais je n'en ai mis: l'.setAttribute('taille', l.childElementCount +1); (pas le double de la longueur que le code ci-dessus montre)
- Il n'a pas de taille double. C'sommes nombre de <optgroup>s et <option>s.
InformationsquelleAutor Andrii Nemchenko
3

Vous pouvez le faire avec javascript simple...
```
<select multiple="multiple" size="return this.length();">
```
...ou limite de hauteur jusqu'à ce que le nombre de dossiers...
```
<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">
```
- Ne fonctionne pas sous FF ou Chrome: jsfiddle.net/ergt5upf
- Apparemment, cela ne fonctionne plus. Mon travail est d'environ $('#firstSelect').attr('size', $('#firstSelect').length);. Regardez ce violon: https://jsfiddle.net/ergt5upf/2/
InformationsquelleAutor Rixell
1

amis:
si vous récupérez de données à partir d'une base:
vous pouvez appeler cette
$registres = *_num_rows( Result_query )
puis
```
<select size=<?=$registers + 1; ?>"> 
```
InformationsquelleAutor darkporn
1

À l'aide de la taille attribut est la solution la plus pratique, toutefois il y a des bizarreries lorsqu'il est appliqué à sélectionnez éléments avec seulement deux ou trois options.
- Réglage de la taille de la valeur de l'attribut "0" ou "1" pour la plupart de rendu par défaut sélectionner l'élément (liste déroulante).
- Réglage de la taille de l'attribut à une valeur supérieure à "1" surtout de rendre une liste de sélection avec une hauteur capable d'afficher au moins quatre éléments. Cela s'applique aussi aux listes avec seulement deux ou trois éléments, conduisant à des blancs de l'espace.
JavaScript Simple peut être utilisée pour définir la taille attribut de la valeur correcte automatiquement, 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 quand il y a seulement deux ou trois options.
- Cette solution nécessite jQuery et donc, à mon avis, n'est pas "simple JavaScript". Aussi, ce code a déjà été indiqué dans les réponses précédentes..
InformationsquelleAutor Werner
0

J'ai eu cette exigence récemment utilisé d'autres postes de cette question pour créer ce script:
```
$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})
```
InformationsquelleAutor Andreas
0

Pour ajuster la taille (hauteur) de tous les multiples sélectionne le nombre d'options, utiliser jQuery:
```
$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})
```
InformationsquelleAutor Steve

Pour supprimer la barre de défilement ajouter le code CSS suivant:

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

Voici un extrait:

CSS:

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

HTML:

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

InformationsquelleAutor MiXT4PE

-1

La manière d'une boîte de sélection est rendu est déterminé par le navigateur lui-même. Ainsi, chaque navigateur va vous montrer à la hauteur de l'option zone de liste dans une autre hauteur.
Vous ne pouvez pas l'influence que.
La seule façon vous pouvez changer cela est de faire une propre sélectionnez à partir de l'éraflure.

InformationsquelleAutor Sven Bieder

Vous devez vous connecter pour publier un commentaire.