Ajax实现三级联动(0520)

时间：2021-11-04 21:36:32

查询数据库中的chinastates表,通过父级代号查询相应省市区.

实现界面：

Ajax实现三级联动(0520)

在js页面实现三级联动

在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面)

用插件的形式,创建三个下拉列表

一、主页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>ajax三级联动</title>

 <script src="../jquery-1.11.2.min.js"></script>

 <script src="sanji.js"></script>

 </head>

 <body>

 <h1>三级联动</h1>

 <div id="sanji"></div>

 </body>

 </html>

二、在js页面实现三级联动

 // JavaScript Document

 $(document).ready(function(e) {

     //将DIV里面写入三个下拉列表

     $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

     //填充内容，显示在页面上

     //1.填充省

     FillSheng();    

     //2.填充市

     FillShi();

     //3.填充区

     FillQu();    

     //如果省选中变化的时候，去填充市和区

     $("#sheng").change(function(){

         //改变市

         FillShi();

         //改变区

         FillQu();

         })

     //如果市选中变化的时候，去改动区

     $("#shi").change(function(){

         //改变区

         FillQu();

         })

         //填充省的方法

         function FillSheng()

         {

             //找到父级代号

             var pcode="0001";

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#sheng").html(str);

                     }

                 });

             }

         //填充市的方法

         function FillShi()

         {

             //找到父级代号

             var pcode=$("#sheng").val();

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#shi").html(str);

                 }

                 });

             }

         //填充区的方法

         function FillQu()

         {

             //找到父级代号

             var pcode=$("#shi").val();

             //调用ajax

             $.ajax({

                 async:false,

                 url:"ChuLi.php",

                 data:{pcode:pcode},

                 type:"POST",

                 dataType:"TEXT",

                 success:function(data){

                     var str="";

                     var hang=data.split("|");

                     for(var i=0; i<hang.length; i++)

                     {

                         var lie=hang[i].split("^");

                         str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                         }

                 $("#qu").html(str);

                 }

                 });

             }

 });

三、处理页面：

 <?php

 //取到传过来的父级代号

 $pcode=$_POST["pcode"];

 //引入类

 include ("../DBDA.class.php");

 $db=new DBDA();

 //写SQL语句

 $sql="select AreaCode, AreaName, ParentAreaCode from chinastates where ParentAreaCode='{$pcode}'";

 //执行

 echo $db->StrQuery($sql);

相关文章