组合框的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]未定义[了解详情]   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。