2017-08-08 1 views
0

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.

+0

Avez-vous vérifié quelle valeur 'selIndex' contient réellement ...? – CBroe

+0

la valeur est indéfinie – joun

Répondre

1

Avez-vous déjà essayé d'utiliser votre débogueur?

Si vous utilisez les outils de débogage intégrés au navigateur et que vous définissez un point d'arrêt juste avant la ligne sur laquelle l'erreur se produit, vous verrez que selIndex n'est pas défini. Donc, vous regarderez alors la ligne qui assigne cette valeur.

var selIndex = listbox.seletedIndex; 

erreur Vous est dans cette ligne, en utilisant votre débogueur vous pouvez voir les propriétés disponibles dans listbox y compris selectedIndex note la c.

+0

im en utilisant la console de débogueur mozila et il montre l'erreur ci-dessus – joun

+0

il veut dire changer 'seletedIndex' à' selectedIndex' – ewwink

+0

owh..thank .. merci de résoudre le problème. parfois, lors de la vérification de notre propre code, le problème ne peut généralement pas être vu, même s'il s'agit d'un code mal typé. – joun