用纯js写，这种方法的优点是可以随时引用该js文件，只需要引入该js文件即可。
1.写一个显示页面
sanji.php
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery文件--> 6 <script src="sanjiliandong.js"></script><!--引入三级联动的js文件--> 7 <title>无标题文档</title> 8 </head> 9 <body> 10 <div id="sanji"></div> 11 </body> 12 </html>
2.纯js页面
sanjiliandong.js
// JavaScript Document $(document).ready(function(e) { //往id=sanji的div里面扔三个下拉 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";//做option选项 $("#sanji").html(str);//往sanji.php文件里添加 FillSheng();//填充省 FillShi();//填充市 FillQu();//填充区 $("#sheng").change(function(){//省变化调用FillShi()和FillQu() FillShi(); FillQu(); }) $("#shi").change(function(){//市变化调用FillQu() FillQu(); }) }); //填充省的方法 function FillSheng() { var pcode = "0001"; $.ajax({ async:false, url:"sanjichuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str =""; for(var i=0;i<hang.length;i++) { lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); } //填充市的方法 function FillShi() { var pcode = $("#sheng").val(); $.ajax({ async:false, url:"sanjichuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str =""; for(var i=0;i<hang.length;i++) { lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } //填充区的方法 function FillQu() { var pcode = $("#shi").val(); $.ajax({ async:false, url:"sanjichuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str =""; for(var i=0;i<hang.length;i++) { lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); }
3.php处理页面
sanjichuli.php
<?php $pcode = $_POST["pcode"]; include("../DBDA.class.php"); $db = new DBDA(); $sql = "select * from chinastates where parentareacode='{$pcode}'"; echo $db->StrQuery($sql); ?>