1 下面是我做三级联动下拉的步骤以及逻辑 2 第一步：先做一个省市区表格 3 第二步：建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息，里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 4 第三步：写封装方法用JS 5 第四步：做个纯php处理页面，这个页面处理传过来的任何代号
第一步：创建表
运行：
第二步：建个PHP页面显示用注意：我用的是HBuilder.exe写的编程
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <script src="jquery-1.11.2.min.js"></script> 7 <script src="sanjiliandong.js"></script> 8 </head> 9 <body> 10 <div id="sanjiliandong"> 11 <!--在这里使用三级联动插件--> 12 </div> 13 </body> 14 </html>
第三步：写封装方法用JS
1 // JavaScript Document 2 $(document).ready(function(e){ 3 //向div里面仍三个下拉 4 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; 5 $("#sanjiliandong").html(str);//三个下拉显示 6 7 8 //当省选中的话市也会跟着变去也会变。市和区都会加载一遍 9 FillSheng();//省 10 FillShi();//市 11 FillQu();//区 12 //给省加点击事件 13 $("#sheng").change(function(){ 14 FillShi();//市 15 FillQu();//区 16 }) 17 //给市加点击事件 18 $("#shi").change(function(){ 19 FillQu();//区 20 }) 21 }); 22 //做三个方法分别为省市区 23 //填充省的方法，如何在表里查询 出省的代号例如：北京0001、天津0001,中国下面所有省都是0001开头的 24 function FillSheng() 25 { 26 var pcode = "0001"; 27 $.ajax({ 28 async:false, 29 url:"chuli.php", 30 data:{pcode:pcode}, 31 type:"POST", 32 dataType:"TEXT", 33 success: function(data){ 34 //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组 35 var hang = data.split("|"); 36 37 var str = "<option value='' >请选择地区</option>"; 38 //把行的数组遍历下用for循环...length长度 39 for(var i=0;i<hang.length;i++) 40 { 41 //把行的索引i在拆下.列与列的分隔符再拆 42 var lie = hang[i].split("^");//这是列的数组 43 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 44 45 $("#sheng").html(str); 46 } 47 } 48 }); 49 } 50 //填充市的方法 51 function FillShi() 52 { 53 var pcode = $("#sheng").val(); 54 $.ajax({ 55 async:false,//**** 56 url:"chuli.php", 57 data:{pcode:pcode}, 58 type:"POST", 59 dataType:"TEXT", 60 success: function(data){ 61 //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组 62 var hang = data.split("|"); 63 64 var str = "<option value='' >请选择城市</option>"; 65 //把行的数组遍历下用for循环...length长度 66 for(var i=0;i<hang.length;i++) 67 { 68 //把行的索引i在拆下.列与列的分隔符再拆 69 var lie = hang[i].split("^");//这是列的数组 70 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 71 } 72 $("#shi").html(str); 73 } 74 }); 75 } 76 //填充区的方法 77 function FillQu() 78 { 79 var pcode = $("#shi").val(); 80 $.ajax({ 81 async:false, 82 url:"chuli.php", 83 data:{pcode:pcode}, 84 type:"POST", 85 dataType:"TEXT", 86 success: function(data){ 87 //返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组 88 var hang = data.split("|"); 89 90 var str = "<option value='' >请选择乡县</option>"; 91 //把行的数组遍历下用for循环...length长度 92 for(var i=0;i<hang.length;i++) 93 { 94 //把行的索引i在拆下.列与列的分隔符再拆 95 var lie = hang[i].split("^");//这是列的数组 96 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 97 98 $("#qu").html(str); 99 } 100 } 101 }); 102 }
第四步：做个纯php处理页面
1 <?php 2 //处理页面只有一个功能处理传过来的所有代号（省、市、区。。。） 3 include("DBDA.class.php"); 4 $db = new DBDA(); 5 $pcode = $_POST["pcode"];//取到赋值代号 6 $sql = "select * from chinastates where parentareacode='{$pcode}'"; 7 echo $db->StrQuery($sql);
//这里面DBDA.class.php是我自己封装的方法类如下
1 <?php 2 class DBDA//类名 3 { //下面是成员 变量 4 public $host= "localhost";//服务器，本机地址 5 public $uid = "root";//用户名 6 public $pwd = "511108";//用户密码 7 public $dbname = "text";//数据库名称 8 9 10 //通过上面的变量来访问数据库。在访问数据库的时候就可以直接造对象 11 //成员方法。执行SQL语句的方法 12 public function Query($sql,$type=1) 13 { 14 $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); 15 16 $r = $db->query($sql);//判断是不是查询是查询就返回一个二维数组 17 18 if($type==1)//如果type等于1属于查询语句，如果查询语句就要返回一个二维数组 19 { 20 return $r->fetch_all();//从结果集读取所有数据。因为是二维数组所以就直接return返回 21 } 22 else 23 { 24 return $r;//如果不是查询，其他语句就直接return $r 25 } 26 } 27 28 29 }