刚自学jquery，用它和ajax还有js结合写了个三级联动，实在是找不到错在哪，大家帮帮我

<!DOCTYPE html>
<html>
  <head>
    <title>cascadeMenu.html</title>

  
    <meta charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
  <script type="text/javascript">
  $(function(){
      $.ajax({
      type:"get",
      dataType:"text",
      url:"${pageContext.request.contextPath}/ProvinceServlet",
      success:function(result){
      var data=Json.parse(result);
      var pSelect=document.getElementById("province");
      for(var i=0;i<data.length;i++){
      var p=data[i];
      pSelect.options.add(new Option(p.name,p.code));
      }
      }
      
      });
      $("#province").change(function(){
       var pCode=$("#province").val();
    
       $.ajax({
       type:"get",
       data:{"pCode":pCode},
       dataType:"text",
       url:"${pageContext.request.contextPath}/CityServlet",
       success:function(result){
      var data2=Json.parse(result);
      var cSelect=document.getElementById("city");
      cSelect.length=1;
      for(var i=0;i<data2.length;i++){
     var c=data2[i];
      cSelect.options.add(new Option(c.name,c.code));
      }
      document.getElementById("town").length=1;
       }
       });
    
      });
     $("#City").change(function(){
       var cCode=document.getElementById("City").value;
      $.ajax({
      type:"get",
      data:{"cCode":cCode},
      dataType:"text",
      url:"${pageContext.request.contextPath}/TownServlet",
     success:function(result){
     var data2=Json.parse(result);
     var tSelect=document.getElementById("Town");
     tSelect.length=1;
     for(var i=0;i<data2.length;i++){
     var t=data2[i];
     tSelect.opptions.add(new Opption(t.name,t.code));
     }
    
     }
      });
      });
 
  }); 
  </script>
  </head>
 
  <body>
     <h3>三级联动</h3>
     <hr>
     <select id="province">
       <option value="-1">-请选择省份-</option>
     </select>
      <select id="city" >
       <option value="-1">-请选择城市-</option>
     </select>
      <select id="town">
       <option value="-1">-请选择区县-</option>
     </select>
  </body>
</html>

解决方案 »

  1.   

    还有三个servlet类，用容器list来存放省市，返回的数据是根据code来确定，在这里就不贴出来了，那块没有问题
      

  2.   


    <!DOCTYPE html>
    <html>
     <head> 
      <title>cascadeMenu.html</title> 
      <meta charset="UTF-8&quot;" /> 
      <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
      <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script> 
      <script type="text/javascript">
      $(function(){
          $.ajax({
          type:"get",
          dataType:"text",
          url:"${pageContext.request.contextPath}/ProvinceServlet",
          success:function(result){
          var data=Json.parse(result);
          var pSelect=document.getElementById("province");
          for(var i=0;i<data.length;i++){
          var p=data[i];
          pSelect.options.add(new Option(p.name,p.code));
          }
          }
          
          });
          $("#province").change(function(){
           var pCode=$("#province").val();
        
           $.ajax({
           type:"get",
           data:{"pCode":pCode},
           dataType:"text",
           url:"${pageContext.request.contextPath}/CityServlet",
           success:function(result){
          var data2=Json.parse(result);
          var cSelect=document.getElementById("city");
          cSelect.length=1;
          for(var i=0;i<data2.length;i++){
         var c=data2[i];
          cSelect.options.add(new Option(c.name,c.code));
          }
          document.getElementById("town").length=1;
           }
           });
        
          });
         $("#City").change(function(){
           var cCode=document.getElementById("City").value;
          $.ajax({
          type:"get",
          data:{"cCode":cCode},
          dataType:"text",
          url:"${pageContext.request.contextPath}/TownServlet",
         success:function(result){
         var data2=Json.parse(result);
         var tSelect=document.getElementById("Town");
         tSelect.length=1;
         for(var i=0;i<data2.length;i++){
         var t=data2[i];
         tSelect.opptions.add(new Opption(t.name,t.code));
         }
        
         }
          });
          });
     
      }); 
      </script> 
     </head> 
     <body> 
      <h3>三级联动</h3> 
      <hr /> 
      <select id="province"> <option value="-1">-请选择省份-</option> </select> 
      <select id="city"> <option value="-1">-请选择城市-</option> </select> 
      <select id="town"> <option value="-1">-请选择区县-</option> </select>  
     </body>
    </html>格式化一下
      

  3.   

    dataType:"text",
    var data=Json.parse(result);
    ？？？
      

  4.   

    $("#City"),document.getElementById("City"),<select id="city">，这里面City注意下大小写
      

  5.   

    几个ID都是大小写没注意getElementById("Town");getElementById("City");
                                                        <select id="town"><select id="city">
      

  6.   

    好吧，代码太长，没仔细看到还有一个 length = 1。