Je crée une Dropbox pour créer des graphiques. J'ai utilisé la fonction change()
pour obtenir la valeur de texte de la zone de liste déroulante. Voici le code:Quel est le problème du code javascript pour la liste déroulante?
\t \t
\t \t //Load the Visualization API and the chart package.
\t \t google.charts.load('current', {'packages':['corechart']});
\t \t //google.load('visualization', '1', {'packages':['corechart','table']});
\t \t //get the selected value
\t \t function change() {
\t \t \t var listbox = document.getElementById("chart");
\t \t \t var selIndex = listbox.seletedIndex;
\t \t \t var selValue = listbox.options[selIndex].value;
\t \t \t var selText = listbox.options[selIndex].text;
\t \t \t
\t \t \t //console.log(selValue);
\t \t
\t \t //chart for apply job post
\t \t google.charts.setOnLoadCallback(dashboardDraw);
\t \t function dashboardDraw(x, y){
\t \t \t //get the location data from table
\t \t \t var jsonLocationData = $.ajax({
\t \t \t \t \t url: "post_location.php",
\t \t \t \t \t data: '{}',
\t \t \t \t \t dataType: "json",
\t \t \t \t \t async: false
\t \t \t \t \t }).responseText;
\t \t \t //create our data table out of json data loaded from server
\t \t \t var LocationData = new google.visualization.DataTable(jsonLocationData);
\t \t \t //get the company data from table
\t \t \t var jsonCompanyData = $.ajax({
\t \t \t \t \t url: "post_company.php",
\t \t \t \t \t data: '{}',
\t \t \t \t \t dataType: "json",
\t \t \t \t \t async: false
\t \t \t \t \t }).responseText;
\t \t \t //create our data table out of json data loaded from server
\t \t \t var CompanyData = new google.visualization.DataTable(jsonCompanyData);
\t \t \t
\t \t \t
\t \t \t //company chart details
\t \t \t var optionsLocation = {
\t \t \t title: 'Job Posts by Location',
\t \t \t pieSliceText: 'label',
\t \t \t tooltip: {isHtml: true},
\t \t \t width: 700,
\t \t \t height: 500,
\t \t \t chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
\t \t };
\t \t \t
\t \t //company chart details
\t \t var optionsCompany = {
\t \t \t title: 'Job Posts by Company',
\t \t \t pieSliceText: 'label',
\t \t \t tooltip: {isHtml: true},
\t \t \t width: 700,
\t \t \t height: 500,
\t \t \t chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
\t \t };
\t \t \t
\t \t var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
\t \t \t if (selValue == 'location_val') {
\t \t \t x = LocationData;
\t \t \t y = optionsLocation;
\t \t \t }
\t \t \t if (selValue == 'company_val') {
\t \t \t x = CompanyData;
\t \t \t \t y = optionsCompany;
\t \t \t }
\t chart.draw(x, y);
\t }
\t \t
\t \t \t \t
\t } \t
\t <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
\t <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<th>
<select id="chart" name="select1" onchange="change()">
\t <option selected disabled="select">Select</option>
\t <option value="company_val">By Company</option>
\t <option value="location_val">By Location</option>
</select>
</th>
</table>
<div id="chart_div"></div>
La console affiche l'erreur suivante:
TypeError: listbox.options[selIndex] is undefined[Learn More] dashboard.php:25:8
La partie problème du code est la suivante:
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
Comment Je résous ce problème? J'ai vérifié le code et il n'y a aucun problème de syntaxe.
Avez-vous vérifié quelle valeur 'selIndex' contient réellement ...? – CBroe
la valeur est indéfinie – joun