Listes déroulantes sans bouton PHP uniquement

Bonjour,

j’ai mis en place des filtres d’affichage à l’aide d’un formulaire.

j’aimerais que l’affichage se fasse uniquement lorsque l’option de la liste déroulante est sélectionnée, sans que l’utilisateur ait à valider en cliquant sur un bouton.

est-il possible de le faire uniquement en PHP ou faut-il obligatoirement passer par du Javascript ?

d’avance merci pour vos réponses

C’est simple : si ça doit se faire côté client, c’est forcément avec du JavaScript.

PHP n’agit que côté serveur, quand des informations lui sont envoyées ou demandées.

Bonjour,

merci pour ta réponse je suis débutant sur tous ces aspects… si je mets en place du Javascript et que l’utilisateur n’active pas Javascript çà ne fonctionnera pas mais çà ne provoquera pas de bugg c’est bien çà ?

C’est ça.

Sachant que très (très) peu de gens n’activent pas le JS (sauf contextes spécifiques).

Il parle de filtre avec une liste déroulante (soit un select en gros), pas d’un menu déroulant.

Si tu organises bien ton DOM, il y a sûrement moyen de faire cela sans JS, juste avec du CSS. Tu auras besoin de la pseudo-classe ":checked"

Et bien non, avec un "select" ce n’est pas possible en 100% CSS car il n’y a pas (encore?) de sélecteur parent en CSS. Il te faudra bien passer par du JS. C’est possible avec une liste de "checkboxs" par contre.

merci j’ai suivi des tuto (j’ai bouclé les tuto HTML5/CCS3 et PHP d’OC + quelques autres) et oui, je suis déjà aller voir sur google mais n’ayant trouvé que des exemples utilisant Javascript je voulais confirmation

et effectivement, tu n’as pas compris ma demande, c’est bien une liste déroulante sur un select je "patauge" comme tu dis, mais je progresse quand même en prenant du plaisir

Je suis resté bloqué sur "menu déroulant", mon précédent message n’a donc aucun sens. La difficulté et les prérequis sont compléments différents. Et l’utilisation du JS devient obligatoire.

Je t’ai fais une petite fonction flexible : https://jsfiddle.net/z7ge5zsu/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

function a312display(e, select) {
    var child = select[0],
        target;

  if (!child) return;

  do {
  console.log(child.selected );
    if (child.dataset && child.dataset.targetid) {
        target = document.getElementById(child.dataset.targetid)
      if (target) {
        target.style.display = (child.selected) ? "inherit" : "none";
      }
    }
  } while (child = child.nextElementSibling);
}

Dans ton select tu dois rajouter : onchange="return a312display(event, this)".

Puis dans ton élément option qui dois afficher un élément, tu ajoutes : data-targetid="avion" où avion est l’id de l’élément.

Pitié, jamais d’écouteurs (ni de styles, tant qu’on y est) dans le HTML !

Je sais mais je ne connais plus le "bon moyen" pour ajouter un listener qui fonctionne avec tous les navigateurs sans utiliser jQuery donc j’utilise le HTML pour ça.

merci pour vos réponses, mais je n’ai pas encore fais de JS donc çà va être compliqué pour moi d’implémenter ce code et encore plus de le comprendre…

element.addEventListener('click', callback), tout simplement. Compatible IE9+ et Opera 7+ donc largement suffisant pour 99,9% des usages de nos jours.

J’étais resté sur l’idée que c’était incompatible avec IE.

Seulement les vieilles versions.

Et IE est lui-même en voie de disparition (Edge prenant le relai avec un bien meilleur respect des standards), donc on sera bientôt tranquilles avec ce genre de bizarreries qui incitaient jadis à utiliser jQuery…

Bonjour,

merci à vous deux pour vos réponses vous vous en doutez mais je ne comprends rien au code proposé par A-312… encore moins que PHP

je mets ce post en résolu bonne journée,

Il suffit juste d’ajouter le code à la page via une balise <script>, et de faire ce que je te dis :

Dans ton select tu dois rajouter : onchange="return a312display(event, this)".

Puis dans ton élément option qui dois afficher un élément, tu ajoutes : data-targetid="avion" où avion est l’id de l’élément.

Tu as même un exemple : https://jsfiddle.net/z7ge5zsu/

oui, j’ai compris les consignes

mais j’essaie de ne pas copier/coller des codes sans les comprendre, au moins un peu

J’avais fais le code pour que tu n’aies rien à comprendre et que tu aies seulement du HTML à modifier pour que ça fonctionne.

je te remercie