组合框的 javascript 代码有什么问题？

Question

我正在创建一个 Dropbox 来创建图表。我一直在使用函数 change() 从组合框中获取文本值。这是代码：

  
  //Load the Visualization API and the chart package.
  google.charts.load('current', {'packages':['corechart']});
  //google.load('visualization', '1', {'packages':['corechart','table']});

  //get the selected value
  function change() {
   var listbox = document.getElementById("chart");
   var selIndex = listbox.seletedIndex;
   var selValue = listbox.options[selIndex].value;
   var selText = listbox.options[selIndex].text;
   
   //console.log(selValue);
  

  //chart for apply job post
  google.charts.setOnLoadCallback(dashboardDraw);

  function dashboardDraw(x, y){

   //get the location data from table
   var jsonLocationData = $.ajax({
     url: "post_location.php",
     data: '{}',
     dataType: "json",
     async: false
     }).responseText;

   //create our data table out of json data loaded from server
   var LocationData = new google.visualization.DataTable(jsonLocationData);

   //get the company data from table
   var jsonCompanyData = $.ajax({
     url: "post_company.php",
     data: '{}',
     dataType: "json",
     async: false
     }).responseText;

   //create our data table out of json data loaded from server
   var CompanyData = new google.visualization.DataTable(jsonCompanyData);
   
   
   //company chart details
    var optionsLocation = {
          title: 'Job Posts by Location',
         pieSliceText: 'label',
         tooltip: {isHtml: true},
         width: 700,
         height: 500,
         chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
        };
   

        //company chart details
         var optionsCompany = {
          title: 'Job Posts by Company',
         pieSliceText: 'label',
         tooltip: {isHtml: true},
         width: 700,
         height: 500,
         chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
        };
   
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
         if (selValue == 'location_val') {
           x = LocationData;
           y = optionsLocation;
         }
     
         if (selValue == 'company_val') {
           x = CompanyData;
           y = optionsCompany;
         }
     
       chart.draw(x, y);
     }
      
      

       
 }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <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()">
       <option selected disabled="select">Select</option>
      <option value="company_val">By Company</option>
       <option value="location_val">By Location</option>
       </select>
    </th>
</table>
    <div id="chart_div"></div>

控制台显示以下错误：

TypeError: listbox.options[selIndex] is undefined[Learn More] dashboard.php:25:8

代码的问题部分是这样的：

var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;

我该如何解决这个问题？我检查了代码，没有语法问题。

Answer 1

您尝试过使用调试器吗？

如果您使用浏览器内置的调试工具并在发生错误的行之前设置一个断点，您将看到 selIndex 未定义。因此，您将查看为其分配值的行。

var selIndex = listbox.seletedIndex;

你的错误在那一行，使用你的调试器你可以看到列表框中可用的属性，包括 selectedIndex 注意 c.

组合框的 javascript 代码有什么问题？

what is the wrong of the javascript code for the combobox?

javascript

jcombobox