利用jquery和ajax实现省市区的三级联动
分享一段4年前的代码，偶然间看到了，不嫌弃的可以拿走，哈哈~~~
思路：首先获取默认的省数据，然后根据省的变动获取对应的市数据，最后再根据市的变动来获取对应的区数据
1、jquery代码
1 <script type="text/javascript">
2 //这是jquery的一般写法
3 //$(document).ready(function(){
4 // alert();
5 //})
6 /////////////////////////////
7 //这是jquery的简写写法
8 $(function(){ 9 //根据不同省来获得不同的市
10 $("#sheng").change(function(){ 11 //获得省的编号
12 var shengId=$("#sheng").val(); 13 //利用ajax实现根据省获得城市的操作
14 $.ajax({ 15 type:"get", 16 //url:"getShiBySheng.php",
17 url:"?action=getShiBySheng", 18 data:{shengId:shengId}, 19 success:function(results){ 20 //利用jquery的函数对于json进行解析
21 var shis=eval(results); 22 //获得城市的下拉列表
23 var shi=$("#shi"); 24 //清空城市下拉列表
25 shi.empty(); 26 //如果要做三级联动，此时必须再加上清空区县下拉列表
27 $("#qu").empty(); 28 //验证ajax是否起作用，可以输出shis.length
29 //alert(shis.length);
30 //遍历数组，活动具体的城市信息
31 for(var i=0;i<shis.length;i++){ 32 var city=shis[i]; 33 //通过遍历city.city_id
34 //alert(city.city_id);
35 //动态加载城市下拉列表框
36 $("<option>").val(city.shi_id).text(city.shi_name).appendTo(shi); 37 } 38 //alert($("#shi").val());
39 //根据省遍历出市的时候，接着默认显示区
40 var shiId=$("#shi").val(); 41 $.ajax({ 42 type:"get", 43 url:"?action=getQuByShi", 44 data:{shiId:shiId}, 45 success:function(results){ 46 var qus=eval(results); 47 var qu=$("#qu"); 48 qu.empty(); 49 for(var i=0;i<qus.length;i++){ 50 var qu1=qus[i]; 51 $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu); 52 } 53 } 54 }); 55 } 56 }); 57 }); 58 //////////////////////////////////////////////////////////
59 //同理可得，根据不同市来获得不同的区
60 $("#shi").change(function(){ 61 var shiId=$("#shi").val(); 62 $.ajax({ 63 type:"get", 64 //url:"getQuByShi.php",
65 url:"?action=getQuByShi", 66 data:{shiId:shiId}, 67 success:function(results){ 68 var qus=eval(results); 69 var qu=$("#qu"); 70 qu.empty(); 71 for(var i=0;i<qus.length;i++){ 72 var qu1=qus[i]; 73 $("<option>").val(qu1.qu_id).text(qu1.qu_name).appendTo(qu); 74 } 75 } 76 }); 77 }); 78 }) 79 </script>
2、html页面
1 <center>
2 <h3>利用jquery和ajax实现省市区的三级联动</h3>
3 省：<select id="sheng">
4 <option>--请选择省--</option>
5 <?php 6 //遍历数组动态添加option 7 foreach ($shengs as $sheng) { 8 echo "<option value='".$sheng[sheng_id]."'>".$sheng[sheng_name]."</option>"; 9 } 10 ?>
11 </select>
12 市：<select id="shi">
13 <option>--请先选择省--</option>
14 </select>
15 区：<select id="qu">
16 <option>--请先选择省--</option>
17 </select>
18 </center>
3、php代码
1 require '../model/UsersModel.class.php'; 2 class UsersController extends BaseController{ 3 private $userModel; 4 //对userModel进行赋值
5 public function __construct() { 6 $this->userModel=new UserModel(); 7 parent::__construct(); 8 } 9 //默认主页
10 public function index(){ 11 $shengs=$this->userModel->getAllShengs(); 12 include '../view/SanJiLianDong.php'; 13 } 14 //根据省来显示市
15 public function getShiBySheng(){ 16 $shengId=$_GET['shengId']; 17 $shis= $this->userModel->getShiBySheng($shengId); 18 //返回编码后的城市数组,将php的数组转换成json返回
19 echo json_encode($shis); 20 } 21 public function getQuByShi(){ 22 $shiId=$_GET['shiId']; 23 $qus= $this->userModel->getQuByShi($shiId); 24 //返回编码后的城市数组,将php的数组转换成json返回
25 echo json_encode($qus); 26 } 27 } 28
29 $UsersController = new UsersController(); 30 $action= empty($_GET['action'])?"index":$_GET['action']; 31 $UsersController->$action();