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

Version imprimable

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:

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!

29/08/2018, 16h06
Manequin

Citation:

Envoyé par Bensljul

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

:roll:

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

Cordialement.

Salut

Pour la déclaration class de tes images
Code:

1 2  <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.

@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:

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:

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:

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:

#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:

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

30/08/2018, 08h24
Bensljul

Merci beaucoup !!

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