Ajax实现省市区三级联动
思路：
（1）首先获取省份信息
（2）发起Ajax请求，注意dataType中的T大写
（3）封装回调函数，回调函数success中用$.each循环每一条数据，动态创建option，并将数据添加到option中
（4）定义点击事件，注意点击省调用的是city函数，点击市调用的是area函数
（5）注意获取市信息用的是省编码（pCode），获取区用的是市编码（cCode）。
1、HTML代码
?1 <!doctype html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>省市区三级联动</title> ?6 ????<style type="text/css"> ?7 ????#showInfo{ ?8 ????????position: absolute; ?9 ????????width: 600px; 10 ????????height: 500px; 11 ????????overflow-y: scroll; 12 ????????overflow-x: hidden; 13 ????????background: lightgreen; 14 ????????left: 50%; 15 ????????margin-left: -300px; 16 ????} 17 ????#showInfo div{ 18 ????????float:left; 19 ????????margin-left: 30px; 20 ????????margin-top: 30px; 21 ????????width: 160px; 22 ????} 23 ????#showInfo div select{ 24 ????????width: 160px; 25 ????} 26 ????</style> 27 ????<script type="text/javascript" src="./jquery-1.11.2.js"></script> 28 ????<script type="text/javascript"> 29 ????$(function() { 30 ????????//获取列表数据的通用方法 31 ????????function getList(code,flag,callback){ 32 ????????????$.ajax({ 33 ???????????????url:‘./data.php‘, 34 ???????????????type:‘get‘, 35 ???????????????dataType:"jsonp", 36 ???????????????data:{citycode:code,flag:flag}, 37 ???????????????success:callback 38 ????????????}); 39 ????????} 40 ????????//获取地区信息的回调函数 41 ????????var area = function(data){ 42 ????????????$.each(data,function(i,element){ 43 ????????????????var op = $("<option></option>").attr("value",element.code).append(element.name); 44 ????????????????$("#area").append(op); 45 ????????????}); 46 ????????} 47 ????????//获取市信息的回调函数 48 ????????var city = function(data){ 49 ????????????$.each(data,function(i,element){ 50 ????????????????var op = $("<option></option>").attr("value",element.code).append(element.name); 51 ????????????????$("#city").append(op); 52 ????????????}); 53 ????????????//判断是否为直辖市 54 ????????????if(data.length == 1){ 55 ????????????????var citycode = $("#city").children("option").eq(0).attr("value"); 56 ???????????????getList(citycode,3,area); 57 ????????????} 58 ?59 ????????} 60 ????????//获得省份信息的回调函数 61 ????????var province = function(data){ 62 ????????????$.each(data,function(i,element){ 63 ????????????????var op = $("<option></option>").attr("value",element.code).append(element.name); 64 ????????????????$("#province").append(op); 65 ????????????}); 66 ????????????//默认北京市 67 ???????????getList(‘110000‘,2,city); 68 ???????????getList(‘110100‘,3,area); 69 ????????} 70 ?????????71 ????????//发送请求获取省份信息 72 ???????getList(0,1,province); 73 ?74 ????????//给省份信息设置选择事件 75 ????????$("#province").change(function() { 76 ????????????$("#city").children("option").remove(); 77 ????????????$("#area").children("option").remove(); 78 ????????????var pcode = $(this).val(); 79 ???????????getList(pcode,2,city); 80 ????????}); 81 ?????????82 ????????//给市信息设置选择事件 83 ????????$("#city").change(function() { 84 ????????????$("#area").children("option").remove(); 85 ????????????var citycode = $(this).val(); 86 ???????????getList(citycode,3,area); 87 ????????}); 88 ?89 ????}); 90 ????</script> 91 </head> 92 <body> 93 ????<div id="showInfo"> 94 ????????<div> 95 ????????????<select id="province"> 96 ????????????</select> 97 ????????</div> 98 ????????<div> 99 ????????????<select id="city">100 ????????????</select>101 ????????</div>102 ????????<div>103 ????????????<select id="area">104 ????????????</select>105 ????????</div>106 ????</div>107 </body>108 </html>HTML优化版代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>省市区三级联动</title> 6 ????<style type="text/css"> 7 ????????#showInfo{ 8 ????????????position: absolute; 9 ????????????width: 600px;10 ????????????height: 500px;11 ????????????overflow-y: scroll;12 ????????????overflow-x: hidden;13 ????????????background: lightgreen;14 ????????????left: 50%;15 ????????????margin-left: -300px;16 ????????}17 ????????#showInfo div{18 ????????????float:left;19 ????????????margin-left: 30px;20 ????????????margin-top: 30px;21 ????????????width: 160px;22 ????????}23 ????????#showInfo div select{24 ????????????width: 160px;25 ????????}26 ????</style>27 ????<script type="text/javascript" src="./jquery-1.11.2.js"></script>28 ????<script type="text/javascript">29 ????????$(function(){30 ????????????function callback(id,code,flag){31 ????????????????$.ajax({32 ???????????????????url:"./data.php",33 ???????????????????type:"get",34 ???????????????????dataType:"jsonp",35 ???????????????????data:{citycode:code,flag:flag},36 ???????????????????success:function(data){37 ?????????????????????????$.each(data,function(i,element){//i表示索引,element表示每一项38 ?????????????????????????????var op= $("<option></option>").attr("value",element.code).append(element.name);//创建option,设置value属性,将name添加到option中39 ????????????????????????????$("#"+id).append(op);//将op添加到province中40 ????????????????????????});41 42 ????????????????????}43 ????????????????});44 ????????????}45 46 ????????????var area=function(cCode){47 ????????????????callback(‘area‘,cCode,3);48 ????????????};49 50 ????????????var city=function(pCode){51 ????????????????callback(‘city‘,pCode,2);52 ????????????};53 ????????????//获取省份信息54 ????????????var province=function(pCode){55 ????????????????callback(‘province‘,pCode,1);56 ????????????};57 58 ????????????//调用获取的省份信息59 ????????????province(0);60 ????????????city(‘110000‘);61 ????????????area(‘110100‘);62 63 ????????????//给省份注册选中事件64 ????????????$(‘#province‘).change(function(){65 ????????????????$("#city").children("option").remove();//点击省，清空市66 ????????????????var pCode=$(this).val();67 ???????????????city(pCode);68 ????????????});69 ????????????//给市注册事件70 ????????????$(‘#city‘).change(function(){71 ????????????????$("#area").children("option").remove();//点击市，清空区72 ????????????????var cCode=$(this).val();73 ???????????????area(cCode);74 ????????????});75 76 ????????});77 78 79 ????</script>80 </head>81 <body>82 <div id="showInfo">83 ????<div>84 ????????<select id="province">85 ????????</select>86 ????</div>87 ????<div>88 ????????<select id="city">89 ????????</select>90 ????</div>91 ????<div>92 ????????<select id="area">93 ????????</select>94 ????</div>95 </div>96 </body>97 </html>2、data.php代码
1 <?php 2 require_once(‘connect.php‘); 3 ?4 $code = $_GET[‘citycode‘];//获取省市区的编码 5 $callback = $_GET[‘callback‘]; 6 $flag = $_GET[‘flag‘];//标志位，用来区分是省市区哪个 7 //查询省市区对应的列表数据 8 if($flag == 1){ 9 ????$query=mysql_query("select * from province order by id");10 }else if($flag == 2){11 ????$query=mysql_query("select * from city where provincecode = ‘".$code."‘ order by id" );12 }else if($flag == 3){13 ????$query=mysql_query("select * from area where citycode = ‘".$code."‘ order by id" );14 }15 $sayList = [];16 while ($row=mysql_fetch_array($query)) {17 ????$sayList[] = array(18 ????????‘code‘=>$row[‘code‘],19 ????????‘name‘=>$row[‘name‘]20 ????);21 }22 if($sayList){23 ????echo $callback.‘(‘.json_encode($sayList).‘)‘;24 25 }else{26 ????echo $callback.‘(‘.‘[]‘.‘)‘;27 }28 29 ?>3、连接数据库 connect.php
1 <?php 2 $host="localhost"; 3 $db_user="root"; 4 $db_pass="123456"; 5 $db_name="mydb"; 6 $timezone="Asia/Shanghai"; 7 ?8 $link=mysql_connect($host,$db_user,$db_pass); 9 mysql_select_db($db_name,$link);10 mysql_query("SET names UTF8");11 12 header("Content-Type: text/html; charset=utf-8");13 date_default_timezone_set($timezone); //北京时间14 ?>实现效果：
第117天：Ajax实现省市区三级联动
原文地址：http://www.cnblogs.com/le220/p/8036979.html