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

Version imprimable

27/01/2021, 17h35
bluemanca

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

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.
28/01/2021, 03h40
ABCIWEB

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).
28/01/2021, 21h50
bluemanca

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. ;)

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

Code:

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

29/01/2021, 00h29
bluemanca

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).
29/01/2021, 01h53
javatwister

Ah ben oui, je comprends; là, il te faudrait un sorcier du css... genre NoSmoking 8-)
29/01/2021, 02h16
bluemanca

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

Si tu peux charger ça en visuel:

Code:

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>

29/01/2021, 02h41
bluemanca

Ç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.
29/01/2021, 05h53
ABCIWEB

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

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

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

Code:

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

29/01/2021, 15h34
bluemanca

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.
29/01/2021, 17h32
NoSmoking
Bonjour,
il ne faut pas oublier de « blurer » après le change
Code:

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 !

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

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 ! ;)

29/01/2021, 19h28
javatwister

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

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

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

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.

Je ne vois pas le rapport avec forEach...

Code:

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

30/01/2021, 00h43
bluemanca

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