Afficher tous les éléments d'un SELECT un fois ouvert

**bluemanca** · 27/01/2021, 17h35

Bonjour à tous.

J'ai un tag SELECT avec une trentaine d'options dedans.

Comment faire pour que lorsqu'on clique sur la dropdown list, tous les éléments soient affichés sans scrollbar verticale à droite, pour permettre une sélection rapide ?

Merci.

**ABCIWEB** · 28/01/2021, 03h40

Salut,

Tu peux utiliser l'attribut "size" dans la balise SELECT pour indiquer le nombre de lignes qui seront affichées. Il faudrait cependant vérifier si les différents navigateurs gèrent bien le problème si cette liste est trop longue pour l'écran du visiteur notamment sur les smartphones (normalement cela devrait rétablir la scrollbar).

**bluemanca** · 28/01/2021, 21h50

Merci, mais tu as lu trop vite ma demande.

L'attribut SIZE fonctionne AVANT MÊME de cliquer sur la dropdown list, en affichant toute les options (ce qui prend une taille énorme) alors que je cherche à afficher toutes les options dans un menu déroulant UNE FOIS QU'ON A CLIQUÉ dessus.

**javatwister** · 28/01/2021, 23h15

Ton select a pour id "s", on va dire:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById("s").addEventListener("focus",function(){this.size=this.options.length})
document.getElementById("s").addEventListener("blur",function(){this.size=0})

**bluemanca** · 29/01/2021, 00h29

C'est presque ça, merci, mais il y a un problème : cela décale le contenu de la page.

Il faudrait que ce qui apparaisse (les liste des options) soit PAR DESSUS le reste de ce qui est sur la page (comme le comportement usuel d'une dropdown list).

**javatwister** · 29/01/2021, 01h53

Ah ben oui, je comprends; là, il te faudrait un sorcier du css... genre NoSmoking

**bluemanca** · 29/01/2021, 02h16

On pourrait essayer une sorte d'overlay sans CSS, en ajoutant des ordres de style dans tes fonctions.

**javatwister** · 29/01/2021, 02h20

Si tu peux charger ça en visuel:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
<style>
#debut{margin-bottom:20px;}
#s{position:absolute;z-index:1;}
#fin{margin-top:60px;position:relative;}
</style>
 
</head>
<body>
<div id="debut">
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
</div>
 
<select id="s">
	<option>un</option> 
	<option>deux</option> 
	<option>trois</option> 
	<option>quatre</option> 
	<option>cinq</option> 
	<option>six</option> 
	<option>sept</option> 
	<option>huit</option> 
	<option>neuf</option> 
	<option>dix</option> 
</select>
 
<div id="fin">
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
</div>
 
<script>
document.getElementById("s").addEventListener("focus",function(){this.size=this.options.length})
document.getElementById("s").addEventListener("blur",function(){this.size=0})
</script>
</body>
</html>

**bluemanca** · 29/01/2021, 02h41

Ça marche presque javatwister, bravo !!!

Le seul problème qui demeure, c'est que lorsque tu cliques une option, il ne referme par la liste.

**ABCIWEB** · 29/01/2021, 05h53

Méthode bourrin, tu clone le select initial et tu remplaces l'existant par le clone, onclick sur une option ?

**javatwister** · 29/01/2021, 09h10

Ah oui, je n'étais pas sur ce problème:

En modifiant le script comme ça, tu seras tranquille:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.addEventListener("DOMContentLoaded",() => {
	document.getElementById("s").addEventListener("focus",e => e.target.size=e.target.options.length);
	["change","blur"].forEach(ev => document.getElementById("s").addEventListener(ev,e => e.target.size=0))
})

**bluemanca** · 29/01/2021, 15h34

Il y a un progrès avec cette solution, merci, MAIS si tu re-clique sur la combo, elle retourne à son état natif : la liste est écourtée avec la scrollbar visible.

**NoSmoking** · 29/01/2021, 17h32

Bonjour,
il ne faut pas oublier de « blurer » après le change

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.getElementById("s")
  .addEventListener("change", function() {
    this.size = 0;
    this.blur();   // force le resize
  });

Nota : sachant que les navigateurs font se qu'ils veulent, au moins en ce qui concerne la présentation, tu n'as aucune garantie que l'effet que tu souhaites soit toujours respecté. Peut-être n'as tu pas choisi la bonne option pour la sélection !

**bluemanca** · 29/01/2021, 17h40

@NoSmoking : ça marche nickel aussi, bravo.

Merci !

Bon voilà où j'en suis rendu :

J'ai plusieurs dropdown côte à côté (sur la même ligne), alors j'ai supprimé tout le CSS et les DIV, ce qui simplifie la gestion de la définition des SELECT.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function PrepareSelect(IdString)
{
  var obj = document.getElementById(IdString);
  obj.style = "position:relative;";
  obj.addEventListener("focus",function(){this.size=this.options.length})
  obj.addEventListener("change", function() {this.size = 0;this.blur();});
}  
 
PrepareSelect('CAT1');
PrepareSelect('CAT2');
PrepareSelect('CAT3');
PrepareSelect('CAT4');
</script>

Ça marche nickel,excepté que la liste "écarte" verticalement la page.

À ce stade, je me demande même si c'est on peut fait un overlay qui ne cache pas les autres dropdown lists.

Au pire, je me conterais de la solution présente.

Merci à tous !

**javatwister** · 29/01/2021, 19h28

Avec des positions relatives, tu ne pourras pas passer au-dessus de la suite;

http://javatwist.imingo.net/selectouvert.htm

**bluemanca** · 29/01/2021, 20h17

@javatwister : solution intéressante, merci, mais qui ne fonctionne que pour des SELECT dont les éléments ont à peu près la même largeur.

Si on a 4 combo avec :
- Dans la première au maximum une option de 12 caractères
- Dans la deuxième au maximum une option de 25 caractères
- Dans la troisième au maximum une option de 15 caractères
- Dans la quatrième au maximum une option de 21 caractères

Alors ça ne marche plus.

Mais merci beaucoup pour ta solution qui m'aide.

Peux-tu réécrire STP ton code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.addEventListener("DOMContentLoaded",()=>{
	document.querySelectorAll("#cadre select").forEach((v,i) =>{
		v.style.left=i*150+"px";
		v.classList.add("view");
		v.addEventListener("focus",()=> v.size=v.options.length);
		["change","blur"].forEach(ev => v.addEventListener(ev,e => {v.size=0;v.blur()}))

sans forEach de manière à ce que je puisse y mettre des variables et que je les fasse évoluer ?

Merci.

**javatwister** · 29/01/2021, 23h05

Je ne vois pas le rapport avec forEach...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
<title>...</title>
<style>
#debut{margin-bottom:20px;}
#cadre{position:absolute;z-index:1;}
select{position:absolute;top:0px;visibility:none;}
.view{visibility:visible;}
#fin{margin-top:60px;position:relative;}
</style>
 
</head>
<body>
<div id="debut">
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
	<strong>Voici le début de la page...</strong>
	<div>Bonjour les gars. J'ai un vrai problème. Il faudrait un sorcier pour nous sortir de là.</div>
</div>
 
<div id="cadre"> 
<select id="s1">
	<option>un</option> 
	<option>deux</option> 
	<option>trois</option> 
	<option>quatre</option> 
	<option>cinq</option> 
	<option>six</option> 
	<option>sept</option> 
	<option>huit</option> 
	<option>neuf</option> 
	<option>dix</option> 
</select>
<select id="s2">
	<option>un et demi</option> 
	<option>deux et demi</option> 
	<option>trois et demi</option> 
	<option>quatre et demi</option> 
	<option>cinq et demi</option> 
	<option>six et demi</option> 
	<option>sept et demi</option> 
	<option>huit et demi</option> 
	<option>neuf et demi</option> 
	<option>dix et demi</option> 
</select>
<select id="s3">
	<option>un</option> 
	<option>deux</option> 
	<option>trois</option> 
	<option>quatre</option> 
	<option>cinq</option> 
	<option>six</option> 
	<option>sept</option> 
	<option>huit trois-quart beaucoup plus long</option> 
	<option>neuf</option> 
	<option>dix</option> 
</select>
<select id="s4">
	<option>un trois-quart</option> 
	<option>deux trois-quart</option> 
	<option>trois trois-quart</option> 
	<option>quatre trois-quart</option> 
	<option>cinq trois-quart</option> 
	<option>six trois-quart</option> 
	<option>sept trois-quart</option> 
	<option>huit trois-quart</option> 
	<option>neuf trois-quart</option> 
	<option>dix trois-quart</option> 
</select>
</div>
 
<div id="fin">
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
	<strong>Voici le reste de la page...</strong>
	<div>Bonjour les gars. J'ai toujours un vrai problème. Les styles calculés, c'est fragile.</div>
</div>
 
<script>document.addEventListener("DOMContentLoaded",()=>{
        let large=0;
        document.querySelectorAll("#cadre select").forEach((v,i,t) =>{
                if(i>0){large+=t[i-1].clientWidth+20;v.style.left=large+"px"}
                v.classList.add("view");
                v.addEventListener("focus",()=> v.size=v.options.length);
                ["change","blur"].forEach(ev => v.addEventListener(ev,e => {v.size=0;v.blur()}))
        })
})</script>
</body>
</html>

http://javatwist.imingo.net/selectouvert.htm

**bluemanca** · 30/01/2021, 00h43

@javatwister : super, merci, ça marche nickel.

Pour ce qui est du forEach, ça m’empêchais d'avoir une variable à l'extérieur qui soit réentrante à chaque itération. Mais pas grave, tu as réussi d'une autre manière.

Merci à tous, je considère la mission réussie.

Bravo et merci.

Afficher tous les éléments d'un SELECT un fois ouvert

HTML

Discussions similaires

Partager

Partager