[Résolu] SELECT imbriqués, c'est imposible

Bonjour,

J'aimerais un SELECT avec des SELECT imbriques.
Je découvre que ce n'est pas possible en HTML (alors que les listes imbriquées sont possibles).

Ce qui ressemble le plus sont les optgroup sauf que j'aimerais un rendu différent.

<select name="animaux">
    <optgroup label="Animaux à 4-jambes">
      <option value="Chien">Chien</option>
      <option value="chat">Chat</option>
      <option value="hamster">Hamster</option>
    </optgroup>
    <optgroup label="Animaux volants">
      <option value="perroquet">Perroquet</option>
      <option value="macaw">Macaw</option>
      <option value="albatros">Albatros</option>
    </optgroup>
  </select>

A l'ouverture du SELECT on ne doit voir que les optgroup (items de premier niveaux) :
Animaux à 4-jambes
Animaux volants

Au clic on m'affiche les animaux du optgroup
Au survol je vois apparaître la liste détaillée avec possibilité de cliquer sur un animal en particulier.

Je pensais que ce problème assez simple serait bien documenté mais en gros je n'ai trouvé qu'un cours en vidéo.

Connaissez-vous d'autres documents ?

Je ne vois pas trop comment m'en sortir avec une solution purement html et css.
Javascript peut le faire, c'est sûr.

Slt,

j'ai pas trop compris qu'elle était ton erreur ?

mais si tu cherches à faire des listes imbriqué avec un sous element dans un element, alors il faudrait plutot utilisé des <ul> et joué avec le css pour faire en sorte que ce soit visuellement imbriqué.

Bonjour,

Merci de ton suivi.

Il n'y a pas d'erreur. Mon but est d'avoir des SELECT imbriqués alors que ce n'est pas possible en HTML, on peut juste placer des Optgroup basiques.

La vidéo dont j'ai donné le lien montre une solution.

C'est sûr qu'il est possible de créer des listes imbriquées avec du javascript pour donner un comportement de SELECT, c'est un peu lourd.
Si tu connais une documentation sur le sujet cela me fait gagner du temps.

Mais du coup, pour bien comprendre, toi tu cherches à avoir quoi visuellement ?
Une liste DANS une liste ?
Une liste lié avec une autre liste ? (donc deux liste distincte)

Bonjour,

J'ai essayé d'expliquer dans mon premier message mais je veux bien croire que ce n'est pas clair.

Visuellement on peut parler de menus déroulants imbriqués.
Prends les menus imbriqués de ce forum.

Avec un menu ce sont des liens.
Avec des SELECT ce sont juste des valeurs, c'est plus léger.
Mon application est de type formulaire, donc SELECT.

Je reviens plus tard pour éditer ce post avec plus de précisions.

Il y aurait bien un truc qui ressemble à ta description avec click et hover en se servant de l'attribut 'multiple' pour avoir un semblant de liste déroulante, mais c'est pas très beau: https://jsfiddle.net/gqnmhdz8/ ou https://jsfiddle.net/rnydgv4s/ ?

Il faut toujours se souvenir que de re styler des éléments de formulaires est mission impossible et au mieux aléatoire, car se sont des éléments spécifique aux navigateurs et qu'il y a aussi un aspect 'sécurité' qui empêche de tromper le visiteur sur la fonction de tel ou tel élément

La seule alternative qui pourra répondre à tes besoin sera via javascript et CSS, CSS pour styler une liste ul/li (ou autre) en cachant le select et javascript pour lier les onclick sur ton html vers le select pour valider la sélection de telle ou telle valeur . Bases toi sur une class appliquée via js pour afficher l'un ou l'autre par défaut au cas ou .

Cdt
Modifié par gcyrillus (02 Nov 2021 - 21:34)

Bonjour gcyrillus,

Merci de ton suivi.

Un grosse parenthèse, quand tu donnes au survol et au clic une signification différente, cela fonctionne très bien sur PC.

Par contre sur téléphone c'est à ma connaissance ingérable.

Je vois que les menus déroulants de ce forum ne sont plus déroulants en version téléphone.

boteha_2 a écrit :
Bonjour,

J'ai essayé d'expliquer dans mon premier message mais je veux bien croire que ce n'est pas clair.

C'est peut être moi qui ai mal compris aussi

boteha_2 a écrit :

Avec un menu ce sont des liens.
Avec des SELECT ce sont juste des valeurs, c'est plus léger.

Avec un menu ce sont des liens, oui et non, ça dépend si tu met des liens dedans ou pas !
Alors je trouve pas que <select> soit plus léger que le <ul>. Surtout que le <select> est pas forcement personnalisable et encore moins imbriquable (même si ce mot n'existe pas ).

Tu peux faire des <selects> en liaison avec d'autre <select> mais tu ne peux pas les "imbriqué" visuellement.
Avec les <ul> c'est très simple

boteha_2 a écrit :

Mon application est de type formulaire, donc SELECT.

un select est indépendant d'un formulaire, et vis et versa. tout est paramétrable.
Modifié par JENCAL (03 Nov 2021 - 16:59)

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.

Un grosse parenthèse, quand tu donnes au survol et au clic une signification différente, cela fonctionne très bien sur PC.

Par contre sur téléphone c'est à ma connaissance ingérable.

Je vois que les menus déroulants de ce forum ne sont plus déroulants en version téléphone.

En fait je cherchais surtout à te dire qu'il te fallait opter pour une alternative.

Si tu as un select avec plusieurs groupe et que tu souhaites le styler comme une liste, peut-être devrait tu partir d'une liste comme te le suggère @jencal , laisser tomber la fausse bonne idée du select et te servir de label et bouton radio (cachés ?) dans tes li de second niveau. Tu garderais un groupe d’éléments de formulaire fonctionnels et une liste à styler à ta guise

position:absolute + coordonnées à l’extérieur de l'écran fonctionne généralement sur les élément de formulaires, sinon visibility/opacity pour les navigateurs qui les remettent dans la zone de vue sitôt qu'ils ont le focus.

Un autre exemple avec des radios : https://codepen.io/gc-nomade/pen/xxLYrQV

Sinon, quel serait l'usage de cette liste d'options et quel look souhaitais tu y appliquer ?
Cdt
Modifié par gcyrillus (04 Nov 2021 - 22:30)

Bonjour gcyrillus,

Merci de ta réponse, je ne l'avais pas vue, cela explique mon manque de réactivité.

Pas mal ton essai avec des input type="radio".

En gros le rendu est ce que je cherche.

Il faudrait en plus donner une value à chaque input.

Comment transmettre cette valeur au clic, là je cale un peu, je suppose qu'il faut une couche de javascript ?

Par ailleurs, il y a la question que je soulève dans mon précédent post : à ma connaissance le :hover n'est pas géré (ou très mal) sur les téléphones portables.

Dans une approche responsive je ne sais pas trop comment fonctionne ton code, plus exactement le :hover.

En production je me limite pour l'instant à un SELECT avec OPTGROUP.
C'est moche, une fois ouvert cela prend de la place mais c'est facile à mettre en œuvre et surtout bien géré par les téléphones.

Néanmoins je reste très ouvert sur ce sujet.
Modifié par boteha_2 (07 Nov 2021 - 20:06)

Bonsoir,

Pour le hover, je ne suis pas sur de saisir, c'est un classique menu déroulant.
Pour la valeur cliquée qui reste affichée, c'est du positionnement en absolute (:checked + label {} ).

Pour l'attribut value, et bien oui, il est nécessaire , le contenu du label n'est pas considéré comme tel

Pen mis à jour pour récupérer le value du radio checked : https://codepen.io/gc-nomade/pen/xxLYrQV?editors=1111

Enfin, si tes utilisateurs sur smartphone t’inquiètent, je dirais qu'il vaudrait mieux garder ton select classique et laisser le mobile faire avec. Tes utilisateurs sur mobile ne seront pas plus perturbés que cela, vu que c'est un mode de fonctionnement normal et qui ne bugue en principe pas.

Cdt
Modifié par gcyrillus (07 Nov 2021 - 22:26)

Bonjour Cyrillus,

Ton code est très sympa, merci, c'est quasiment le but recherché.

Pour le hover, je veux juste dire que c'est encore mal géré par les téléphones.

Très mal par les iPhone, j'ai dû ajouter une couche de javasript.
Une couche très simple mais qui pose des problèmes à Androïd, il faut laisser le doigt appuyé longtemps ou faire un double contact pour provoquer l'action voulue.

Pour l'instant je reste sur un SELECT à l'ancienne.
Modifié par boteha_2 (14 Nov 2021 - 20:47)

boteha_2 a écrit :
Bonjour Cyrillus,
Pour le hover, je veux juste dire que c'est encore mal géré par les téléphones.

Très mal par les iPhone, j'ai dû ajouter une couche de javasript.
Une couche très simple mais qui pose des problèmes à Androïd, il faut laisser le doigt appuyé longtemps ou faire un double contact pour provoquer l'action voulue.

Pour le :hover sur iphone j'ai juste mis

document.body.addEventListener('touchstart', function(){}, false, {passive: true});

dans mon javascript et ça marche très bien sur iphone et android (le :hover est déclenché par un touché).

Bonjour kerlutinoec,

Très intéressant !

Je vais essayer pendant le week-end, je vous tiens informés.

Bonjour kerlutinoec,

J'ai testé ton JS :

document.body.addEventListener('touchstart', function(){}, false, {passive: true});

Effectivement cela fait du bien aux iPhone.
Androïd semble ne pas en avoir besojn (il traite bien :hover) mais cela ne lui fait pas de mal.

Merci beaucoup.

Bonjour TraceyFrench,

Parles-tu de ce code ?

document.body.addEventListener('touchstart', function(){}, false, {passive: true});

Oui, cela marche, je l'ai dit dans mon post précédent.

Si ton css commande l'ouverture d'un menu par :hover ce code semble indispensable pour les iPhone.

Le menu s'ouvre au toucher.
Pour le fermer il faut toucher en dehors du menu.

Bonjour,

Peut-être faut-il passer cette discussion dans le forum javascript ?

Pour présenter le problème je me suis fendu d'un codepen

Le code est peut-être perfectible mais il fonctionne sur les PC de bureau comme sur les iPhone.

Le seul problème .concerne les portables sous Android, du moins la version où je teste.

Si tu touches une fois le bouton "Table d'orientation", la couleur change mais il ne se passe rien.
Pour ouvrir le menu il faut cliquer une deuxième fois.

J'ai essayé plusieurs variantes du javascript sans succès.

Bonjour,

S'il y a pas mal de niveaux d'imbrication, peut-être que la balise <details> pourrait aider.

Amicalement,
Modifié par parsimonhi (30 Nov 2021 - 02:53)

Bonjour parsimonhi,

Merci de ton suivi.

<details>, c'est en effet une piste intéressante.

Est-ce assez bien supporté, question importante ?

Bonjour,

boteha_2 a écrit :
Est-ce assez bien supporté, question importante ?

C'est supporté assez largement. On oublie ie, mais bon, ie est-il encore un navigateur ?

Il y a quelques petits bugs mineurs d'affichage qui peuvent se manifester ici et là, mais ça marche quand même pas trop mal.

Surtout, ça permet d'afficher/cacher du contenu facilement sans bricolage et sans js. C'est son point fort.

Voir https://jeudego.org (qui est le site mentionné dans mon profil) en fenêtre pas trop large. On peut alors afficher/cacher le menu en cliquant sur "menu" en haut à gauche ("menu" n'apparait que si la fenêtre n'est pas trop large).

Ça marche aussi si on désactive js (j'ai prévu dans ce cas un comportement un peu différent : le menu peut être caché/affiché quelque soit la taille de la fenêtre).

Lorsqu'il n'y a qu'un contenu d'un seul niveau, tout un tas d'autres solutions sont possibles. Mais si tu passes à un contenu avec plusieurs niveaux d'imbrication (comme cela semble être ton cas), ça peut devenir vraiment intéressant d'utiliser la balise <details>.

Amicalement,