Création liste déroulante + affichage image en fonction de la sélection

**Bensljul** · 29/08/2018, 15h06

Bonjour à tous,

je cale sur la réalisation d'une liste déroulante. en effet j'ai des graph qui sont générés automatiquement et j'aimerais créer une liste déroulant dynamique en html avec en choix l'année et le mois

voici le code HTML :

Code :

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
 
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="index.js"></script>
  </head>
  <body>
<div id="liste">      
    <select onchange="javascript:affichage(this);" id="mois">
        <option> tous</option> <!-- Toute l'année -->
        <option> janv</option>
        <option> fev</option>
        <option> mar</option>
        <option> avr</option>
        <option> mai</option>
        <option> juin</option>
        <option> juil</option>
        <option> aout</option>
        <option> sept</option>
        <option> oct</option>
        <option> nov</option>
        <option> dec</option>
    </select>
    <select id="année">
        <option>2017</option>
        <option>2018</option>
    </select> 
</div>
<div id="affichage">
    <img src="images/AttributionCodeConfidentiel.png" class="tous"/>
    <img src="images/AttributionCodeConfidentiel_201706.png" class="17" class="juin"/>
    <img src="images/AttributionCodeConfidentiel_201707.png" class="17" class="juil"/>
    <img src="images/AttributionCodeConfidentiel_201708.png" class="17" class="aout"/>
    <img src="images/AttributionCodeConfidentiel_201709.png" class="17" class="sept"/>
    <img src="images/AttributionCodeConfidentiel_201710.png" class="17" class="oct"/>
    <img src="images/AttributionCodeConfidentiel_201711.png" class="17" class="nov"/>
    <img src="images/AttributionCodeConfidentiel_201712.png" class="17" class="dec"/>
    <img src="images/AttributionCodeConfidentiel_201801.png" class="18" class="jan"/>
    <img src="images/AttributionCodeConfidentiel_201802.png" class="18" class="fev"/>
    <img src="images/AttributionCodeConfidentiel_201803.png" class="18" class="mar"/>
    <img src="images/AttributionCodeConfidentiel_201804.png" class="18" class="avr"/>
    <img src="images/AttributionCodeConfidentiel_201805.png" class="18" class="mai"/>
    <img src="images/AttributionCodeConfidentiel_201806.png" class="18" class="jui"/>
    <img src="images/AttributionCodeConfidentiel_201807.png" class="18" class="juil"/>
    <img src="images/AttributionCodeConfidentiel_201808.png" class="18" class="aout"/>
</div>   
  </body>
</html>

mon premier problème est ce que je peux identifier chaque image comme j'ai fait?
et ensuite je ne sais pas quoi utiliser pour réaliser ce que je veux : javascript ou jquery ...

merci pour vos conseils par avance!

**Manequin** · 29/08/2018, 16h06

Envoyé par Bensljul

j'aimerais créer une liste déroulant dynamique en html

Bonsoir, en fait je ne sais pas ce que tu veux faire avec les images. Exprime toi clairement.

Cordialement.

**ProgElecT** · 29/08/2018, 16h24

Salut

Pour la déclaration class de tes images

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    <!-- <img src="images/AttributionCodeConfidentiel_201706.png" class="17" class="juin"/> -->
         <img src="images/AttributionCodeConfidentiel_201706.png" class="17 juin"/>

inutile de répéter class= plusieurs fois pour le même élément, sinon tu auras une erreur Duplicate attribute class.

Invité · 29/08/2018, 17h45

@ProgElecT +1 (je n'avais pas vu )

1- Le plus malin serait déjà de mettre des attributs value aux <option>.

De préférence, numériques (c'est toujours plus facile à traiter) :

Code :

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
<div id="liste">      
    <select onchange="affichage_images();" id="mois">
        <option value="99"> tous</option> <!-- Toute l'année -->
        <option value="1"> janv</option>
        <option value="2"> fev</option>
        <option value="3"> mar</option>
        <option value="4"> avr</option>
        <option value="5"> mai</option>
        <option value="6"> juin</option>
        <option value="7"> juil</option>
        <option value="8"> aout</option>
        <option value="9"> sept</option>
        <option value="10"> oct</option>
        <option value="11"> nov</option>
        <option value="12"> dec</option>
    </select>
    <select onchange="affichage_images();" id="annee">
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select> 
</div>

2- Ensuite, au lieu des classes, il est là aussi plus malin d'utiliser des attributs data-* (Utiliser les attributs de données).

On obtient alors:

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
<div id="affichage">
    <img src="images/AttributionCodeConfidentiel.png" data-annee="2017" data-mois="99"/>
    <img src="images/AttributionCodeConfidentiel_201706.png" data-annee="2017" data-mois="6"/>
    <img src="images/AttributionCodeConfidentiel_201707.png" data-annee="2017" data-mois="7"/>
    <img src="images/AttributionCodeConfidentiel_201708.png" data-annee="2017" data-mois="8"/>
    <img src="images/AttributionCodeConfidentiel_201709.png" data-annee="2017" data-mois="9"/>
    <img src="images/AttributionCodeConfidentiel_201710.png" data-annee="2017" data-mois="10"/>
    <img src="images/AttributionCodeConfidentiel_201711.png" data-annee="2017" data-mois="11"/>
    <img src="images/AttributionCodeConfidentiel_201712.png" data-annee="2017" data-mois="12"/>
 
    <img src="images/AttributionCodeConfidentiel.png" data-annee="2018" data-mois="99"/>
    <img src="images/AttributionCodeConfidentiel_201801.png" data-annee="2018" data-mois="1"/>
    <img src="images/AttributionCodeConfidentiel_201802.png" data-annee="2018" data-mois="2"/>
    <img src="images/AttributionCodeConfidentiel_201803.png" data-annee="2018" data-mois="3"/>
    <img src="images/AttributionCodeConfidentiel_201804.png" data-annee="2018" data-mois="4"/>
    <img src="images/AttributionCodeConfidentiel_201805.png" data-annee="2018" data-mois="5"/>
    <img src="images/AttributionCodeConfidentiel_201806.png" data-annee="2018" data-mois="6"/>
    <img src="images/AttributionCodeConfidentiel_201807.png" data-annee="2018" data-mois="7"/>
    <img src="images/AttributionCodeConfidentiel_201808.png" data-annee="2018" data-mois="8"/>
</div>

3- Enfin, l'affichage/masquage se gère très bien en JavaScript.

N.B. jQuery EST du JavaScript.
Seule la syntaxe change (elle est plus simple en jQuery, mais nécessite de charger la librairie).

4- Il ne te reste plus qu'à écrire la fonction affichage_images() :

Code JavaScript :

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
function affichage_images()
{
  var val_mois = Number(document.getElementById('mois').value);
  var val_annee = Number(document.getElementById('annee').value);
 
  var images = document.querySelectorAll('#affichage img');
  images.forEach( function(image){
    if(   (val_mois == 99 && image.dataset.annee == val_annee)
       || (val_mois != 99 && image.dataset.mois == val_mois && image.dataset.annee == val_annee )
    ){
      image.style.display = 'block';
    } else {
      image.style.display = 'none';
    }
  });
}

On peut masquer en CSS toutes les images au chargement de la page :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#affichage img { display:none; }

Si des valeurs sont déjà sélectionnée dans les listes déroulantes (par exemple "2017"), il faut activer la fonction au chargement de la page (onload) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
window.onload = function(){
  affichage_images();
}

**Bensljul** · 30/08/2018, 08h24

Merci beaucoup !!

je vais tester çà aujourd'hui même !!

Création liste déroulante + affichage image en fonction de la sélection

HTML

Discussions similaires

Partager

Partager