Bonjour,

J'ai un <select> avec deux <option>. Je voudrais que lorsque on sélectionne l'option 1, une div s'affiche, et que si on sélectionne l'option 2, une autre div s'affiche. J'ai très peu de connaissances en JS et j'aurais donc besoin d'aide pour faire cela.

Voici mon code actuel : https://codepen.io/Titouan79/pen/orJKmJ

J'ai ajouté des commentaires au code pour que vous compreniez ce qu'il faut afficher.

Merci d'avance pour vos réponses

-
Edité par TitouanDev 10 juillet 2019 à 10:04:01

Salut,

tu peut écouter le on change du select, pour afficher tel ou tel div en fonction de la valeur :

document.getElementById('select_id').addEventListener('change', function() {
    document.querySelectorAll('.select-div').forEach(function(el) {
        el.style.display = 'none';
    });
    document.getElementById(this.value).style.display = 'block';
});

 Ou la value de l'option correspond à l'id de la div à afficher.

-
Edité par lk77 10 juillet 2019 à 10:08:54

Merci, pourrais-tu le modifier dans le codepen stp ?

Bonjour TitouanDev,

Une autre proposition mais celle de  @lk77 est bonne aussi

https://codepen.io/Zonecss/pen/EBroWX

Re-bonjour,

J'ai une autre contrainte à respecter (j'ai utilisé le code de @AliasDmc comme base) : Il faudrait que lorsque l'on clique sur le bouton "submit" (qui recharge la page), la div qui a été ouverte précédemment reste affichée si elle comporte des erreurs ($error dans le php) et se ferme s'il n'y a pas d'erreur (comme le code actuellement). En effet, les erreurs de remplissage du formulaire vont s'afficher au dessous de chaque input, et il faudrait donc que l'utilisateur voit les erreurs directement, sans avoir à recliquer sur l'option qui ouvre la div.

Merci d'avance

PS : Merci @AliasDmc et @lk77 pour vos réponses

-
Edité par TitouanDev 17 juillet 2019 à 15:59:24