Cacher / Afficher

yvesroland Le 13 mars 2019 à 03:28

Bonsoir cher membre, je suis un peu novice en Js et là, je suis coincé. J'ai trois balises select sur une page html et je voudrais cacher les deux dernieres de telle sortes qu'au clic d'une option de la premiere, la deuxieme s'ouvre et qu'au clic d'une option de la deuxieme, la troisieme s'ouvre.
J'espere avoir été assez explicite
Merci beaucoup de m'aider sur ce coup

PrimFX Le 13 mars 2019 à 14:00

Salut !
Je pense voir ce que tu souhaites faire, cela dit ce sera beaucoup plus simple de t'aiguiller / te proposer une solution avec du code...
Peux-tu nous poster ce que tu as déjà codé côté HTML et JS ?
Merci 😉
A+
PrimFX

Balatharas Le 13 mars 2019 à 18:56 (Édité le 13 mars 2019 à 18:58)

Salut
Avec du JS tu peux utiliser onchange, exemple:

<select name="tonselect" id="select1" onchange="document.getElementById('select2').style.display = 'block'">
    <option>1 Option</option>
    <option>1 Optionnn</option>
</select>

<select name="select2" id="select2" onchange="document.getElementById('select3').style.display = 'block'" style="display: none">
    <option>2 Option</option>
    <option>2 Optionnn</option>
</select>

<select name="select3" id="select3" style="display: none">
    <option>3 Option</option>
    <option>3 Optionnn</option>
</select>

En fait l'attribut onchange permet d'écrire du JS. Lorsqu'un changement est détecté sur la balise (ici c'est la sélection d'une option), le JS écrit dans le onchange va s'exécuter. Ici document.getElementById sert comme son nom l'indique à selectionner une balise grâce a son id pour le modifier: style.display = "block".

Mais comme tu le vois c'est un peu chiant de mettre le js dans les balises. C'est pour ça que la majorité préfèrent utiliser jQuery . Une fois la librairie sur ta page tu peux faire un truc comme ça:

<head>
   <title>TESTS</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('#select1').change(function() {
            $('#select2').fadeIn();
            // fadeIn() est comme style.display = "block", mais en plus pratique,
            // court et il affiche le select avec une animation
         });

         $('#select2').change(function() {
            $('#select3').fadeIn();
         });
      });
   </script>
</head>
<body>
   <select name="tonselect" id="select1">
      <option>1 Option</option>
      <option>1 Optionnn</option>
   </select>

   <select name="select2" id="select2" style="display: none">
      <option>2 Option</option>
      <option>2 Optionnn</option>
   </select>

   <select name="select3" id="select3" style="display: none">
      <option>3 Option</option>
      <option>3 Optionnn</option>
   </select>
</body>

La on va préférer ce mode d'exécution car il sépare le js du html.
Le $ est en quelque sorte le moyen d'appeler jQuery.
$(document).ready = lorsque la page est prête à être utilisée, function() {
$('#select1').change = on selectionne le premier select pour surveiller ses changements (avec .change), function() {
S'il y a un changement cette fonction s'active: $('#select2').fadeIn pour afficher select2

Tu noteras que je met un # avant l'id. C'est justement parce que c'est un id. Comme en CSS on les repère comme ça.
Si les select avaient plutot une class comme moyen d'être repéré, j'aurais mis
$('.select1').change() et $('.select2').fadeIn()

Voilà ça devrait déjà t'aider pas mal je pense

yvesroland Le 14 mars 2019 à 01:05

@primFX j'allais envoyer mon extrait de code lorsque j'ai vu tout le cours 😅😅que m'a fait @Balatharas . Vraiment merci à vous, Le systeme fonctionne.😎

Échange

Articles / Vidéos

Ressources