jquery从数据库中获取数据装换成json数据实现三级联动

最新推荐文章于 2022-08-19 00:50:32 发布

wive

最新推荐文章于 2022-08-19 00:50:32 发布

阅读量1.4k

点赞数

文章标签： jquery json数据三级联动

本文链接：https://blog.csdn.net/javadhh/article/details/37966297

版权

前端技术专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
	 <select id="county" name="county">
	 	<option value="">请选择.....</option>
	 </select>
  </body>
   <script language="JavaScript">
    $().ready(function(){
/****************************************************************/				
	  //加载从数据库查询所有的省的信息,放置到省的下拉选中
	  $.post("provinceServlet",function(data,textStatus){
           var dataObj=eval("("+data+")");		 
		   for(var i=0;i<dataObj.length;i++){
		   	  var $option=$("<option></option>");
			  $option.attr("value",dataObj[i].pid);
			  $option.text(dataObj[i].pname);
			  $("#province").append($option);
		   }
	  });	
/****************************************************************/
     //省的变化引起城市的变化
	 $("#province").change(function(){
		var jsonObj={
			pid:$(this).val()
		}
		
		//删除城市下所有的下拉选,保留<option value="">请选择.....</option>
		$("#city option[value!='']").remove();
		
	    //删除县下所有的下拉选保留<option value="">请选择.....</option>
		$("#county option[value!='']").remove();
		
		
		
	   $.post("cityServlet",jsonObj,function(data,textStatus){
		   var dataObj=eval("("+data+")");		 
		   for(var i=0;i<dataObj.length;i++){
		   	  var $option=$("<option></option>");
			  $option.attr("value",dataObj[i].cid);
			  $option.text(dataObj[i].cname);
			  $("#city").append($option);
		   }
			
	   });
	 });
/**********************************************************/
    //城市的变化引起县的变化
    $("#city").change(function(){
		var jsonObj={
			cid:$(this).val()
		} 
		
		//删除县下所有的下拉选保留<option value="">请选择.....</option>
		$("#county option[value!='']").remove();
		
		$.post("countyServlet",jsonObj,function(data,textStatus){
			 var dataObj=eval("("+data+")");		 
		     for(var i=0;i<dataObj.length;i++){
		   	    var $option=$("<option></option>");
			    $option.attr("value",dataObj[i].tid);
			    $option.text(dataObj[i].tname);
			    $("#county").append($option);
		   }
		}); 
	});	 
/****************************************************/			  
	});
  </script>
</html>

servlet中返回的数据

List<County> list=countyDaoImpl.findCountysByCid(cid);	      
JSONArray  jsonarray=JSONArray.fromObject(list);
out.println(jsonarray.toString());

代码来自：冯威---传智播客Ajax

wive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录