Action au click sur une liste déroulante

Signaler
-
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
-
Bonjour,
j'ai une page web en php qui contient des graphiques, et je veux intégrer dans cette page web une liste déroulante qui, en choisissant l'année, nous affiche les graphiques qui correspond à cette année.. j'ai créée la liste déroulante en html mais je sais pas comment faire pour que lorsqu'on clique sur un élément de la liste déroulante m'affiche l'ensemble de graphiques dans la même page web.
Merci de m'aider.

5 réponses

Messages postés
15605
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
24 février 2021
516
Bonjour, écrire tout en majuscule, avec plein de point d'exclamation ça fait agressif et du coup ça ne donne pas envie de lire le message et donc encore moins d'y répondre. En outre un titre explicite est plus engageant.
Je vais donc renommer pour te laisser une chance.

De plus, pour que ceux qui savent puisse te répondre il faudrait qu'ils sachent comment tu as codé ta liste déroulante, voir ici comment poster un code.

La modération m'amène à intervenir dans de nombreux posts, mais le seul langage que je maitrise est le C#, un peu de VB aussi. Pour vos codes pensez à la coloration. Réponse trouvée ->Question Résolue
Bonjour,
Merci bcp, les ghraphiques que j'ai créeé c'est à l'aide du logiciel Highcharts, c'est en javascript.
A présent j'ai fait cela :
<form name="test" method="post" action ="home.php">

<select name="annee" onChange="this.form.submit()">
<option value="1"> 2009</option>
<option value="2"> 2010</option>
<option value="3"> 2011</option>
<option value="4"> 2012</option>

</select>

Mais je sais pas comment faire pour qu'on cliquant sur 2009 par exemple l'ensemble de graphiques s'affiche. Merci bcp
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344 > lara
On t'a demandé plusieurs choses dans nos messages précédents ...
1 - Que tu utilises la coloration syntaxique pour poster ton code sur le forum...
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Que tu nous fournisses le code qui te permet de générer tes graphiques...

Sans ça... IMPOSSIBLE de t'aider
Voici mon code de graphique:

<script type="text/javascript">
 $(document).ready(function() {
    var options = {
                chart: {
    renderTo: 'container0',
                type: 'column',
    
        },
        title: {
            text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
        },
 
        xAxis: {
            categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
           
        },
        yAxis: {
            min: 0,
            title: {
                text: 'millions'
            },
    
        },
        legend: {
            enabled: false
        },
    plotOptions: {
                    series: {
                       
                        dataLabels: {
                            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            pointFormat: '  <b>{point.y:.1f} millions</b>'
        },
        series: []
  }
  $.getJSON("evtrim.php", function(json){
  //options.xAxis.categories=json[0]['data'];
  options.series[0]=json[0];
chart=new Highcharts.Chart(options);
});
   });
</script>
 <div id="container0" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> 





J'espère que ce sera une bonne réponse pour ta qst
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344 > lara
C'est une bonne réponse à ma question...(il manquait le CHOIX du langage dans les balises de code.. je les ai ajouté.)

Le hic vois tu .... c'est que tu as posté ta question dans la section PHP du forum....
hors.... ton code... comme tu DEVRAIS le savoir... n'en contient pas.... il est UNIQUEMENT en JAVASCRIPT ( Jquery) !

et donc... il faut que sur ton ONCHANGE tu déclenches l'appel AJAX qui te permet d'afficher ton graphique (en lui passant en paramètre... la valeur du select)


==>>> Je déplace la conversation dans la BONNE section du forum...
>
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021

Merci
Messages postés
17
Date d'inscription
jeudi 31 octobre 2013
Statut
Membre
Dernière intervention
9 février 2016
1
bonjour,
je te donne le principe de base :


<?php
$formname = "nom_formulaire";
//début du code PHP
/* on test si un choix a été fait dans la liste déroulante */
if(isset($_POST['liste1'])){
/* un choix a été fait,
on positionne la valeur de liste1 à $_POST['liste1'] */
$liste1=$_POST['liste1'];
}
else{
/* aucun choix n'a été fait dans la liste déroulante,
on positionne la valeur de liste1 à '-1' */
$liste1=-1;
}
....
...
....
?>
<select name="liste1" onchange="<?php echo $formname ?>.submit();">
<!-- il faut cette ligne pour avoir obliagtoirement un changement -->
<option style="background-color: #CCCCCC;" value=-1>SELECTION</option>
<option value="value1">option1</option>
<option value="value2">option2</option>
</select>
<?php

...
...
...
...
if($liste1 != -1)
{
/* la valeur de liste1 est différente de '-1', un choix a été fait :
-- > on refait une requête avec la condition de la valeur sélectionnée dans la liste déroulante */
/* récurération de la valeur sélectionnée */
$liste1=$_POST['liste1'];
}


@+
Merci, j'ai testé ton exemple mais il ne marche pas.:(
peur-tu me donner un exemple plus lisible ? Merci
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344
Au niveau de ton SELECT :

<select name="annee" onChange="genereGraphique(this.value);">
<option value="0"> CHOISIR UNE ANNEE </option>
<option value="2009"> 2009</option>
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
</select> 


Au niveau de ton script...

 // A l'ouverture de la page..génère le graphique
 $(document).ready(function() {
  genereGraphique("2012");
});


// Récupération des données du graphique via AJAX
// Format : JSON
function genereGraphique(annee){
   var urlAjx ="evtrim.php";
    $.ajax({ 
      type: "POST",
       url:urlAjx,
       data: "annee="annee
            ,
       async: false,
       dataType: "json",
       success: function(reponse){
         drawChart(reponse);
        },
       error:function(reponse){
        alert('error');
        ;
       }
  });
}

// Fonction qui CREEE le graphique
function drawChart(json){
 var options = {
        chart: {
        renderTo: 'container0',
        type: 'column',
    
        },
        title: {
            text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
        },
 
        xAxis: {
            categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
           
        },
        yAxis: {
            min: 0,
            title: {
                text: 'millions'
            },
    
        },
        legend: {
            enabled: false
        },
    plotOptions: {
        series: { 
            dataLabels: {
            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            pointFormat: '  <b>{point.y:.1f} millions</b>'
        },
    series: []
  }
  options.series[0]=json[0];
  chart=new Highcharts.Chart(options);
}
   
 
}


Bien sûr;... il te reste la partie evtrim.php à modifier pour prendre en compte la variable annee ( passée en POST).



Cordialement,
Jordane
Mercii pour votre aide , mais je sais pas pourquoi le code ne marche pas, ils m'ont dit que :genereGraphique is not defined :(
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344 > lara
Ben... tout dépend où tu as placé le code dans ta page...

Postes nous le code complet de ta page.
En fait j'ai un ensemble de graphiques pour chaque année que j'ai regroupé dans un tableau.. comme celui ci

<form name="test" method="post" >

<select name="annee" onChange="genereGraphique(this.value)">
<option value="0"> CHOISIR UNE ANNEE </option>
<option value="2009"> 2009</option>
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
</select>

        <div class="row">

<div class="col-lg-6">
<div class="panel-body text-center"> 
 <script type="text/javascript">
 $(document).ready(function() {
    var options = {
                chart: {
    renderTo: 'container0',
                type: 'column',
    
        },
        title: {
            text: 'Evolution trimestrielle du Parc Mobile  '
        },
 
        xAxis: {
            categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
           
        },
        yAxis: {
            min: 0,
            title: {
                text: 'millions'
            },
    
        },
        legend: {
            enabled: false
        },
    plotOptions: {
                    series: {
                       
                        dataLabels: {
                            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            pointFormat: '  <b>{point.y:.1f} millions</b>'
        },
        series: []
  }
  $.getJSON("evte.php", function(json){
  //options.xAxis.categories=json[0]['data'];
  options.series[0]=json[0];
chart=new Highcharts.Chart(options);
});
   });
</script>
 <div id="container0" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> 

</div>
</div> 
      
      
         <div class="col-lg-6">
<div class="panel-body text-center"> 
 <script type="text/javascript">
$(document).ready(function() {
    var options = {
                chart: {
    renderTo: 'container',
                type: 'column',
    
        },
        title: {
            text: 'Répartition Prépayé Post-payé'
        },
        xAxis: {
            categories: ['mars-08','juin-08','sept-08','déc-08','mars-09']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'milliers'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'center',
            x: 10,
            verticalAlign: 'under',
            y: 371,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        
        series: []
  }
  $.getJSON("repartition.php", function(json){
  options.series[0]=json[0];
  options.series[1]=json[1];
  chart=new Highcharts.Chart(options);
});
 });
 </script>
 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> 

</div>  
</div> 

</div>
</div>
</div>



  <div class="tab-pane fade" id="service-two">
            <br/>
 <div class="col-lg-6">
<div class="panel-body text-center"> 
 <script type="text/javascript">
 $(document).ready(function() {
    var options = {
                chart: {
    renderTo: 'container09',
                type: 'column',
    
        },
        title: {
            text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
        },
 
        xAxis: {
            categories: ['juin-08','sept-08', 'déc-08','mars-09','juin-09' ]
           
        },
        yAxis: {
            min: 0,
            title: {
                text: 'millions'
            }
        },
        legend: {
            enabled: false
        },
   plotOptions: {
                    series: {
                       
                        dataLabels: {
                            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            pointFormat: '  <b>{point.y:.1f} millions</b>'
        },
        series: []
  }
  $.getJSON("evtrimmobile juin09.php", function(json){
  options.series[0]=json[0];
chart=new Highcharts.Chart(options);
});
   });
  
 </script>
 <div id="container09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> 

 </div></div>
 
 <div class="col-lg-6">
<div class="panel-body text-center"> 
 <script type="text/javascript">
 $(document).ready(function() {
    var options = {
                chart: {
    renderTo: 'containerr09',
                type: 'column',
    
        },
        title: {
            text: 'Répartition Prépayé Post-payé'
        },
        xAxis: {
            categories: ['juin-08','sept-08','déc-08','mars-09','juin-09']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'milliers'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'center',
            x: 10,
            verticalAlign: 'under',
            y: 371,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
   plotOptions: {
                    series: {
                       
                        dataLabels: {
                            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        
        series: []
  }
  $.getJSON("repartitionm.php", function(json){
  options.series[0]=json[0];
  options.series[1]=json[1];
  chart=new Highcharts.Chart(options);
});
 });

 </script>
 <div id="containerr09" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> 

 </div></div>
 
 </div></div>
 </div>




Et je sais pas comment faire pour résoudre ce prob, j'ai éssayé avec un seul graphique comme tu m'a dis :



<!DOCTYPE html>
<html lang="fr">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="js/jquery-1.7.min.js"> </script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/tms-0.4.x.js"></script>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js" ></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>


    <title>ANRT - Observatoires </title>
</head>
<body>

<script text="javascript">
$(document).ready(function() {
  genereGraphique("2009");
});
</script>

<script text="javascript">

// Récupération des données du graphique via AJAX
// Format : JSON
function genereGraphique(annee){
   var urlAjx ="evtrimmobile.php";
    $.ajax({ 
      type: "POST",
       url:urlAjx,
       data: "annee="annee
            ,
       async: false,
       dataType: "json",
       success: function(reponse){
         drawChart(reponse);
        },
       error:function(reponse){
        alert('error');
        ;
       }
  });
}

// Fonction qui CREEE le graphique
function drawChart(json){
 var options = {
        chart: {
        renderTo: 'container0',
        type: 'column',
    
        },
        title: {
            text: 'Evolution trimestrielle du Parc Mobile (en milliers)'
        },
 
        xAxis: {
            categories: ['mars-08','juin-08','sept-08','déc-08','mars-09' ]
           
        },
        yAxis: {
            min: 0,
            title: {
                text: 'millions'
            },
    
        },
        legend: {
            enabled: false
        },
    plotOptions: {
        series: { 
            dataLabels: {
            enabled: true,
        format: '{point.y:.1f}'
       }}},
        tooltip: {
            pointFormat: '  <b>{point.y:.1f} millions</b>'
        },
    series: []
  }
  options.series[0]=json[0];
  chart=new Highcharts.Chart(options);
}
   


</script>

<form name="test" method="post" >

<select name="annee" onChange="genereGraphique(this.value)">
<option value="0"> CHOISIR UNE ANNEE </option>
<option value="2009"> 2009</option>
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
</select>
</body>
 </html>




Mais cela ne marche pas.
MERCI POUR VOTRE AIDE
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344
déjà .. tu as écris à plusieurs endroits :
<script text="javascript">

Alors.. que la bonne syntaxe c'est :
<script type="text/javascript">


Ensuite... tu as, dans ton code HTML mis une balise FORM .. (sans la FERMER ...) mais qui est, de toutes façons, inutiles .

Enfin... utilises tu les outils de debogage de ton navigateur internet ??
Je te conseille d'utiliser le plugin FIREBUG pour FIREFOX.
Tu le lances.. ouvres l'onglet CONSOLE et regarde s'il n'y a pas d'erreurs de scripts indiquées dedans.
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344
PS.. penses aussi à ajouter le LANGAGE lorsque tu utilises les balises de code.... ça le rend plus lisible.
Si tu as lu le lien que je t'ai donné tout à l'heure.. tu as du voir comment faire... ça y est expliqué !
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
118
bonjour

c'est une erreur de syntaxe dans la fonctiongenereGraphique

 data: "annee="annee

le guillemet de année est placé apres le signe egale

la correction donne
 data: "annee"=annee

}</code>
Messages postés
31470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
344 >
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021

Y'a bien une erreur de syntaxe... mais pas celle là.

En fait le guillemet est bien placé.... mais il manque un +
data: "annee="+annee
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 février 2021
118
je plussois