题目要求:
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择。
实现技术:php ajax
实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化。
使用chinastates表查询
<!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>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <h1>三级联动</h1> <select id="sheng"></select> <select id="shi"></select> <select id="qu"></select> </body> <script type="text/javascript"> $(document).ready(function(e) { sheng(); shi(); qu(); $("#sheng").change(function(){ shi(); qu(); }); $("#shi").change(function(){ qu(); }); }); function sheng() { var areacode = "0001"; $.ajax({ async:false, url: "liandongjiazai.php", data: {areacode: areacode}, 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 = str + "<option value='"+lie[0]+"'>" + lie[1] + "</option>"; } $("#sheng").html(str); } }); } function shi() { var areacode = $("#sheng").val(); $.ajax({ async:false, url:"liandongjiazai.php", data:{areacode:areacode}, 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 = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } function qu() { var areacode = $("#shi").val(); $.ajax({ url:"liandongjiazai.php", data:{areacode:areacode}, 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 = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); } </script> </html>
联动处理页面
<?php $areacode = $_POST["areacode"]; include("LZY.class.php"); $db= new LZY(); $sql = "select * from chinastates WHERE parentareacode='{$areacode}' "; $arr = $db->Query($sql); $str = ""; foreach($arr as $v) { $str = $str.implode("^",$v)."|"; } $str = substr($str,0,strlen($str)-1); echo $str;
当然,我们也可以用 dataType:"json",方法,为了以后便于使用可以将三级联动做成jQuery插件,这样,变方便了使用。
首先,我们先做出主页面的html代码
<!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>无标题文档</title> <script src="../../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> </head> <body> <div id="sanji"></div> </body> </html>
然后就是我们封装的js插件了
// JavaScript Document // JavaScript Document $(document).ready(function(e) { //加载三个下拉列表 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载显示数据 //加载省份 FillSheng(); //加载市 FillShi(); //加载区 FillQu(); //当省份选中变化,重新加载市和区 $("#sheng").change(function(){ //加载市 FillShi(); //加载区 FillQu(); }) //当市选中变化的时候,重新加载区 $("#shi").change(function(){ //加载区 FillQu(); }) }); //加载省份信息 function FillSheng() { //取父级代号 var pcode = "0001"; //根据父级代号查数据 $.ajax({ async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success:function(data){ var str = ""; for(var sj in data) { str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>"; } $("#sheng").html(str); } }); } //加载市信息 function FillShi() { //取父级代号 var pcode = $("#sheng").val(); //根据父级代号查数据 $.ajax({ async:false, url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success:function(data){ var str = ""; for(var sj in data) { str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>"; } $("#shi").html(str); } }); } //加载区信息 function FillQu() { //取父级代号 var pcode = $("#shi").val(); //根据父级代号查数据 $.ajax({ url:"load.php", data:{pcode:pcode}, type:"POST", dataType:"JSON", success:function(data){ var str = ""; for(var sj in data) { str = str+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>"; } $("#qu").html(str); } }); }
最后是
<?php $pcode = $_POST["pcode"]; include("../../LZY.class.php"); $db = new LZY(); $sql = "select * from chinastates where parentareacode='{$pcode}'"; echo $db->JsonQuery($sql);
如果有需要封装类可以留言