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

qq_39924562 2017-11-09 04:01:39

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

<meta charset=UTF-8">


<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>

...全文

898 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

超哥万岁 2017-11-17

打赏
举报

这是你写的吗？工具会给你提示错误信息吧

幽饮烛 2017-11-16

打赏
举报

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

幽饮烛 2017-11-16

打赏
举报

ID大小写要注意，还有，你不要只顾往　ｓｅｌｅｃｔ　里面加选项，却没有把之前加过的选项移除。

木子007 2017-11-15

打赏
举报

请你告诉我
框起来的是啥？

-_0 2017-11-13

打赏
举报

id="值" 与 $("#值") 中的值要一摸一样，同一位置相同字母大小写不一样也会出错。

d15835130136 2017-11-10

打赏
举报

静看大神回复。我也看不出来啊

独家de记忆 2017-11-10

打赏
举报

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

Never_More666 2017-11-10

打赏
举报

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

风一样的河流 2017-11-10

打赏
举报

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

繁华终归落尽 2017-11-09

打赏
举报

F12打断点调试吧

繁华终归落尽 2017-11-09

打赏
举报


<!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>

格式化一下

qq_39924562 2017-11-09