ajax三级联动
Posted MrY的nn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax三级联动相关的知识，希望对你有一定的参考价值。
不得不说的trim(),我的机器写出来的文件接收data时一定要去除空格…没有去写有参数的方法，因为找错就费了大量的时间，所以相对别人而言trim()于我可能真真的就此记住了
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>//加载jquery包 <script src="sanji.js"></script>//加载js文件，jquery记得放在最前面就行 </head> <body> <div id="sanji"></div> </body> </html>
jquery代码
// javascript Document $(document).ready(function(e) { $("#sanji").html("<select id=‘sheng‘></select> <select id=‘shi‘></select> <select id=‘qu‘></select>");//三个下拉 //填充内容 //1.填充省 FillSheng();//调用三个方法 FillShi(); FillQu(); $("#sheng").change(function(){ //调用jquery自有的change方法，省份改变时相应的市、区也发生改变 //改变市，重新填充市 FillShi(); //改变区，重新填充区 FillQu(); }) //如果市选中变化的时候就去填充区 $("#shi").change(function(){//依旧是调用change方法，市改变时相应的区也会发生改变 //改变区，重新填充区 FillQu(); }) function FillSheng()//省的方法 { var pcode="0001";//默认0001 //调用ajax $.ajax({ async:false,//同步 url:"chuli.php",//从哪个页面获取data data:{pcode:pcode}, type:"POST",//post传值 dataType:"TEXT", success: function(data){ var str=""; var hang=data.trim().split("|"); //去除空格，将接收的data用字符"|"拆分 for(var i=0;i<hang.length;i++) { var lie=hang[i].split("^");//将行里面每一个数据用"^"隔开 str+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";//下拉显示的内容 } $("#sheng").html(str); //将写好的str给html页面 } }) } 市、区的function同省一样，只是有个别地方需要更改 function FillShi() { var pcode=$("#sheng").val();//获取省的value值 $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var str=""; var hang=data.trim().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();//获取市的value值 $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var str=""; var hang=data.trim().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代码
<?php $pcode=$_POST["pcode"];//post获取pcode值 include("ChaXun.class.php"); $db=new ChaXun(); $sql="select AreaCode,AreaName,ParentAreaCode from Chinastates where ParentAreaCode=‘{$pcode}‘"; echo $db->StrQuery($sql); //$attr=$db->Query($sql); //var_dump ($attr); //$str=""; //foreach($attr as $v) //{ // $str=$str.implode("^",$v); // $str=$str."|"; //} //$str=substr($str,0,strlen($str)-1); //echo $str;
以上是关于ajax三级联动的主要内容，如果未能解决你的问题，请参考以下文章