IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

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


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut 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.

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2010
    Messages
    5 260
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : septembre 2010
    Messages : 5 260
    Points : 10 114
    Points
    10 114
    Par défaut
    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).

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    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.

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    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})

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    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).

  6. #6
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    Ah ben oui, je comprends; là, il te faudrait un sorcier du css... genre NoSmoking

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    On pourrait essayer une sorte d'overlay sans CSS, en ajoutant des ordres de style dans tes fonctions.

  8. #8
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    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>

  9. #9
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    Ç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.

  10. #10
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2010
    Messages
    5 260
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : septembre 2010
    Messages : 5 260
    Points : 10 114
    Points
    10 114
    Par défaut
    Méthode bourrin, tu clone le select initial et tu remplaces l'existant par le clone, onclick sur une option ?

  11. #11
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    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))
    })

  12. #12
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    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.

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    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 !

  14. #14
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    @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 !

  15. #15
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    Avec des positions relatives, tu ne pourras pas passer au-dessus de la suite;

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

  16. #16
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    @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.

  17. #17
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    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

  18. #18
    Nouveau membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 31
    Points : 28
    Points
    28
    Par défaut
    @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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher tous les éléments d'un DataSetRow
    Par aug125 dans le forum BIRT
    Réponses: 2
    Dernier message: 28/06/2013, 09h44
  2. [JavaScript] Comment déselectionner tous les éléments d'un select multiple ?
    Par Bovino dans le forum Contribuez
    Réponses: 2
    Dernier message: 01/10/2012, 10h49
  3. Récupérer tous les éléments selectionnés d'un select multiple
    Par xillibit dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/01/2010, 18h52
  4. [XSL] afficher tous les éléments fils d'un noeud
    Par alexandra dans le forum XSL/XSLT/XPATH
    Réponses: 1
    Dernier message: 07/09/2006, 08h33
  5. Réponses: 15
    Dernier message: 21/06/2004, 16h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo