Effectuez 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 fait que la sélection a une hauteur de page de 100% ...

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

D'autres idées?

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

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

Vous pouvez le faire en utilisant l' sizeattribut dans la selectbalise. En supposant que vous ayez 8 options, alors vous le feriez comme:

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

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;

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

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

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

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

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

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

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

Exemple:

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

selectpourrait contenir optgroupce qui prend une ligne chacun:

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

Dans cet exemple, le total sizeest (1+1)+(1+2)=5.

Vous pouvez le faire avec un simple javascript ...

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

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

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

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>

L'utilisation de l' attribut size est la solution la plus pratique, mais il y a des bizarreries quand il est appliqué pour sélectionner des éléments avec seulement deux ou trois options.

• Définir la valeur de l'attribut size sur "0" ou "1" rendra principalement un élément de sélection par défaut (liste déroulante).
• La définition de l'attribut size sur une valeur supérieure à "1" rendra principalement une liste de sélection avec une hauteur capable d'afficher au moins quatre éléments. Cela s'applique également aux listes avec seulement deux ou trois éléments, ce qui entraîne des espaces blancs involontaires.

Un simple JavaScript peut être utilisé pour définir automatiquement l'attribut size sur la valeur correcte, par exemple, voyez 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.

amis: si vous récupérez les données d'un DB: vous pouvez appeler cela $ registers = * _num_rows (Result_query) alors

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

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

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

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

Vous pouvez d'abord compter la balise d'option, puis définir l'attribut count for size. Par exemple, en PHP, vous pouvez compter le tableau puis utiliser une boucle foreach pour le tableau.

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

La manière dont une zone de sélection est rendue est déterminée par le navigateur lui-même. Ainsi, chaque navigateur vous montrera la hauteur de la zone de liste d'options dans une autre hauteur. Vous ne pouvez pas influencer cela. La seule façon de changer cela est de faire votre propre sélection à partir de zéro.

Voici un exemple d'utilisation de package, qui est très populaire dans la communauté 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' : ''),
]) !!}

Paquet: https://laravelcollective.com/