Comment limiter les options visibles dans une liste déroulante HTML <select> ?

Question

Comment limiter le nombre d'options affichées dans un fichier HTML ? <select> descendre ?

Par exemple :

    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="20">20</option>
    </select>

Comment puis-je faire en sorte que le navigateur n'affiche que les cinq premières options et fasse défiler l'écran vers le bas pour le reste ?

Answer 1

Vous pouvez essayer ceci

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
             <option value="1">This is select number 1</option>
             <option value="2">This is select number 2</option>
             <option value="3">This is select number 3</option>
             <option value="4">This is select number 4</option>
             <option value="5">This is select number 5</option>
             <option value="6">This is select number 6</option>
             <option value="7">This is select number 7</option>
             <option value="8">This is select number 8</option>
             <option value="9">This is select number 9</option>
             <option value="10">This is select number 10</option>
             <option value="11">This is select number 11</option>
             <option value="12">This is select number 12</option>
           </select>

Cela a fonctionné pour moi

Answer 2

Vous pouvez utiliser le size pour que l'attribut <select> apparaissent sous la forme d'une boîte au lieu d'une liste déroulante. Le nombre que vous utilisez dans le champ size définit le nombre d'options visibles dans la boîte sans défilement.

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

• http://jsfiddle.net/cSSjF/

Vous ne pouvez pas l'appliquer à un <select> et Cependant, il apparaît toujours sous la forme d'une liste déroulante. Le navigateur/système d'exploitation décide du nombre d'options à afficher pour les listes déroulantes, à moins que vous n'utilisiez HTML, CSS et JavaScript pour créer une fausse liste déroulante.

Answer 3

La solution de Raj_89 est la plus proche d'être une option valable bien que, comme l'a mentionné Kevin Swarts dans son commentaire, elle va casser IE, ce qui est un problème pour un grand nombre d'entreprises clientes (et dire à votre client que vous ne coderez pas pour IE "pour des raisons" n'est pas de nature à rendre votre patron heureux ;) ).

J'ai donc joué avec et voici le problème : l'événement 'onmousedown' pose problème dans IE, donc ce que nous voulons faire, c'est empêcher l'affichage par défaut lorsque l'utilisateur clique sur le menu déroulant pour la première fois. Il est important que ce soit la seule fois que nous fassions cela : si nous empêchons l'affichage par défaut lors du prochain clic, lorsque l'utilisateur fait son choix, l'événement onchange ne se déclenchera pas.

De cette façon, nous obtenons une belle liste déroulante, sans scintillement, sans panne d'IE - cela fonctionne tout simplement... du moins dans IE10 et plus, et dans les dernières versions de tous les autres navigateurs majeurs.

<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
    <option></option>
    <option>IE 9</option>
    <option>IE 10</option>
    <option>Edge</option>
    <option>Firefox</option>
    <option>Chrome</option>
    <option>Opera</option>
</select>

Voici le violon : https://jsfiddle.net/88cxzhom/27/

Quelques autres points à noter : 1) Le positionnement absolu et la définition de l'indice z sont utiles pour éviter de déplacer d'autres éléments lorsque les options sont affichées. 2) Utilisez la propriété "currentTarget" - il s'agira de l'élément sélectionné dans tous les navigateurs. Alors que 'target' sera select dans IE, le reste vous permettra de travailler avec les options.

J'espère que cela aidera quelqu'un.

Answer 4

L'attribut de taille est important, si la taille est de 5, les 5 premiers éléments seront affichés et pour les autres, il faudra faire défiler la page vers le bas.

<select name="numbers" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

Answer 5

Tnx @Raj_89 , Votre tour était très bon , peut être mieux , seulement en utilisant un style supplémentaire , qui le rend sur d'autres objets dom , exactement comme un tag d'option de sélection commun en html ...

select{
 position:absolute;
}

Vous pouvez voir le résultat ici : http://jsfiddle.net/aTzc2/