Drop down list PROBLEM

[kawtar]

Hello,

I have a php web page that contains graphics, and I want to incorporate into this web page a drop-down list, selecting the year, we display the graphic that matches this year at the same page ... I created the drop-down list in html but I know how to have when you click on an item in the drop-down list displays all my graphics in the same web page.

here is the list that I created:

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

Here is my graphics :

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

 

PS: graphics are created using software Highcharts

Thank you for helping me.

[justsomeguy]

I don't think you want the form to submit when they make a change, I think you want it to run a function to get the value they selected and show or hide elements on the page. You can show and hide elements using CSS, you can change the element's display style to none to hide it, for example. I'm not sure exactly what you're trying to do, but maybe you want all of those divs to start out hidden, and the Javascript function should get the value they selected, hide all divs, then show the one they selected. You'll need to have some correlation between the dropdown values and the divs. Instead of just 1, 2, 3, 4 for the dropdown values you might want to use the ID of the div to show.