web-dev-qa-db-fra.com

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

Comment puis-je limiter le nombre d'options affichées dans un HTML <select> menu déroulant?

Par exemple:

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

Comment puis-je demander au navigateur d'afficher uniquement les cinq premières options et de faire défiler vers le bas pour le reste?

htmldrop-down-menu
35
medowlock

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>

Ça a marché pour moi

22
Raj_89

Vous pouvez utiliser l'attribut size pour rendre le <select> apparaît sous forme de boîte au lieu d'une liste déroulante. Le nombre que vous utilisez dans l'attribut size définit le nombre d'options visibles dans la zone 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>

Vous ne pouvez pas l'appliquer à un <select> et l'ont toujours sous la forme d'une liste déroulante. Le navigateur/système d'exploitation décidera du nombre d'options à afficher pour les listes déroulantes, sauf si vous utilisez HTML, CSS et JavaScript pour créer une fausse liste déroulante.

17
Paul D. Waite

La solution Raj_89 est la plus proche d'être une option valide, comme mentionné par Kevin Swarts dans le commentaire, cela va casser IE, ce qui pour un grand nombre de clients d'entreprise est un problème (et dire à votre client que vous ne coderez pas pour IE "parce que les raisons" ne plairont probablement pas à votre patron;)).

J'ai donc joué avec et voici le problème: l'événement `` onmousedown '' fait un ajustement dans IE, donc ce que nous voulons faire, c'est d'empêcher le défaut lorsque l'utilisateur clique sur la liste déroulante pour la première fois. Il est important que ce soit seulement le moment de le faire: si nous empêchons le défaut au prochain clic, lorsque l'utilisateur fait son choix, l'événement onchange ne se déclenchera pas.

De cette façon, nous obtenons une liste déroulante Nice, pas de scintillement, pas de panne IE - fonctionne juste ... bien au moins dans IE10 et plus, et les dernières versions de tous les autres principaux navigateurs.

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

Peu de choses à noter: 1) Le positionnement absolu et le réglage de l'index z sont utiles pour éviter de déplacer d'autres éléments lorsque les options sont affichées. 2) Utilisez la propriété 'currentTarget' - ce sera l'élément select sur tous les navigateurs. Alors que "cible" sera sélectionné dans IE, le reste vous permettra en fait de travailler avec l'option.

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

6
Michal Ja

Tnx @ Raj_89, Votre astuce était très bonne, peut être meilleure, uniquement en utilisant un style supplémentaire, qui le fait sur d'autres objets dom, exactement comme une balise d'option de sélection commune en html ...

select{
 position:absolute;
}

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

4
mohammadreza berneti

l'attribut de taille est important, si la taille = 5, les 5 premiers éléments seront affichés et pour les autres, vous devrez faire défiler 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>
2
shiva L

J'ai utilisé ce code et cela a fonctionné pour moi sur Chrome, Firefox et IE.

<select  onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()"  onblur="this.size=0;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
2
Affes Med Fedi

Il n'est pas possible de limiter le nombre d'éléments visibles dans la liste déroulante de sélection (si vous l'utilisez comme liste déroulante et non comme liste).

Mais vous pouvez utiliser javascript/jQuery pour remplacer cette boîte de sélection par autre chose, qui ressemble à une liste déroulante. Ensuite, vous pouvez gérer la hauteur de la liste déroulante comme vous le souhaitez.

jNice serait un plugin jQuery qui possède de telles fonctionnalités. Mais il existe également de nombreuses alternatives pour cela.

2
Armin
<p>Which one true?</p>
<select id="sel">
    <option>-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

(afficher la première option de toutes les options)

document.getElementById("sel").options.length=1;
0
harun ugur