使用ajax方式实现了下简单的 四级联动，
数据库：
以下为前台代码：
?1 <!DOCTYPE html> ?2 <html> ?3 <head> ?4 ????<title> ?5 ????????四级联动 ?6 ????</title> ?7 ????<meta charset="utf-8"> ?8 ????<script type="text/javascript" src = "jquery.min.js" ></script> ?9 ?10 </head> 11 <body> 12 ?????13 ????<table border="1px" align="center" width="800px" > 14 ????????<form> 15 ????????????<tr> 16 ????????????????<th>国家</th><th>省</th><th>市</th><th>县</th> 17 ????????????</tr> 18 ????????????<tr> 19 ????????????????<td> 20 ????????????????<select ?id = "guo"> 21 ????????????????</select> 22 ????????????????</td> 23 ????????????????<td> 24 ????????????????<select ?id = "sheng"> 25 ????????????????</select> 26 ????????????????</td> 27 ????????????????<td> 28 ????????????????<select ?id = "shi"> 29 ????????????????</select> 30 ????????????????</td> 31 ????????????????<td> 32 ????????????????<select id = "xian"> ????33 ????????????????</select> 34 ????????????????</td> 35 ????????????</tr> 36 ????????</form> 37 ????</table> 38 ?????39 </body> 40 <script type="text/javascript"> 41 ?42 ????$(function(){ 43 ????????//首先在加载时直接让第一栏展示一级类目 44 ????????$.ajax({ 45 ????????????‘url‘:"liandong.php", 46 ????????????‘data‘:{pid:0}, 47 ????????????‘type‘:"post", 48 ????????????‘dataType‘:"json", 49 ????????????‘success‘:function(data){ 50 ????????????????var result = data; 51 ????????????????var str = "<option>请选择</option>"; 52 ????????????????//将接收到的数据遍历并拼接到字符串str中 53 ????????????????$.each(result,function(index,value){ 54 ????????????????????str+= "<option value="+value.id+">"+value.area+"</option>"; 55 ?56 ????????????????}); 57 ????????????????//将字符串str添加到select中 58 ????????????????$(‘#guo‘).html(str); ????59 ????????????} 60 ????????}); 61 ?62 ????????//当一级栏目发生变更，触发change事件 63 ????????$(‘#guo‘).change(function(){ 64 ????????????var a = $(‘#guo option:selected‘).attr("value"); 65 ?66 ????????????$.ajax({ 67 ????????????????‘url‘:"liandong.php", 68 ????????????????‘data‘:{pid:a}, 69 ????????????????‘type‘:"post", 70 ????????????????‘dataType‘:"json", 71 ????????????????‘success‘:function(data2){ 72 ????????????????????var result2 = data2; 73 ????????????????????var str2 = "<option>请选择</option>"; 74 ????????????????????$.each(result2,function(i,v){ 75 ????????????????????????str2 += "<option value="+v.id+">"+v.area+"</option>"; 76 ?77 ????????????????????}); 78 ?79 ????????????????????$(‘#sheng‘).html(str2); ????80 ????????????????} 81 ????????????}); 82 ????????}); 83 ?????????84 ????????$(‘#sheng‘).change(function(){ 85 ????????????var b = $(‘#sheng option:selected‘).attr("value"); 86 ?87 ????????????$.ajax({ 88 ????????????????‘url‘:"liandong.php", 89 ????????????????‘data‘:{pid:b}, 90 ????????????????‘type‘:"post", 91 ????????????????‘dataType‘:"json", 92 ????????????????‘success‘:function(data3){ 93 ????????????????????var result3 = data3; 94 ????????????????????var str3 = "<option>请选择</option>"; 95 ????????????????????$.each(result3,function(i,v){ 96 ?????????????????????????97 ????????????????????????str3 += "<option value="+v.id+">"+v.area+"</option>"; 98 ?99 ????????????????????});100 101 ????????????????????$(‘#shi‘).html(str3); ???102 ????????????????}103 ????????????});104 ????????});105 106 ????????$(‘#shi‘).change(function(){107 ????????????var c = $(‘#shi option:selected‘).attr("value");108 109 ????????????$.ajax({110 ????????????????‘url‘:"liandong.php",111 ????????????????‘data‘:{pid:c},112 ????????????????‘type‘:"post",113 ????????????????‘dataType‘:"json",114 ????????????????‘success‘:function(data4){115 ????????????????????var result4 = data4;116 ????????????????????var str4 = "<option>请选择</option>";117 ????????????????????$.each(result4,function(i,v){118 ????????????????????????str4 += "<option value="+v.id+">"+v.area+"</option>";119 120 ????????????????????});121 122 ????????????????????$(‘#xian‘).html(str4); ???123 ????????????????}124 ????????????});125 ????????});126 ????});127 ????128 ????129 130 </script>131 132 </html>php代码：
1 header(‘content-type:text/html;charset=utf-8‘); 2 ?3 function mysql_get($sql){ 4 ?5 ????//连接数据库 6 ????$mysql = mysqli_connect("localhost","root","root","lx"); 7 ?8 ????//执行sql语句 9 ????$result = mysqli_query($mysql,$sql);10 ????//定义空数组11 ????$data = array();12 13 ????//从结果集中取出数据存入data中14 ????while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){15 ????$data[] = $row;16 ????}17 18 ????return $data;19 }20 21 //接收pid22 $pid = $_POST[‘pid‘];23 24 $sql = "select * from sp_area where pid = $pid";25 //调用自定义的mysql_get函数26 $data = mysql_get($sql);27 28 //echo 到前台页面29 echo json_encode($data);30 php用ajax方式实现四级联动
原文地址：http://www.cnblogs.com/liyante/p/7820265.html