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

--省的字段是:province
--市的字段是:city
--县的字段是:area
--------------------------------------------------------------------------->
<script type="text/javascript">

var xmlHttp;//声明变量
var requestType="";//声明初始类型为空
function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头
{
  
 if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真,否则是假

{
    
   xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp
    }
    else
if(window.XMLHttpRequest)
    {
    
   xmlHttp=new
XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp
    }
}

function handleStateChange(){//判断返回的一个函数,来确定执行那个的函数
  
 if(xmlHttp.readyState==4)
    
   {//4说明是执行交互完毕0 (未初始化)1 (正在装载)2
(装载完毕) 3 (交互中)4 (完成)
    
   if(xmlHttp.status==200)
    
     
 {//http的一个报头说明成功找到
    
     
 if(requestType=="city"){//判断查询的类型
    
     
     
     
     
   showcity();//返回响应的显示
    
     
     
     
     }
    
     
 else if(requestType="area"){//判断响应的查询的类型
    
     
     
     
     
     
 showarea();//返回响应的显示
    
     
     
     
     
   }
    
     
 }
    
   }
}

function queryCity(citycode){//执行程序查询,查询城市的
  
 createXMLHttpRequest();//调用创建XmlHttp的函数
  
 requestType="city";//表示类型,查询城市处理显示的时候需要用到
    var
url='data.php?provincecode='+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存

xmlHttp.open("GET",url,true);//建立服务器连接,异步传输tree

xmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数

xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}

function queryArea(citycode){//查询程序
  
 createXMLHttpRequest();//调用创建XmlHttp的函数
  
 requestType="area";//查询县的
    var
url="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存

xmlHttp.open("GET",url,true);
  
 xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名

xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因
}

function showcity(){//显示函数
  
 document.getElementByIdx_x("city").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据

}
function showarea(){
  
 document.getElementByIdx_x("area").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据

}
</script>
</head>
<body>
<?php
  
 $conn=mysql_connect("localhost","root","root");//链接数据库
  
 mysql_select_db("novel");//选择数据库
  
 mysql_query("set
names 'utf8'");//设定字符集
  
 $sql="select *
from province";//查询数据库province表也就是省
  
 $result=mysql_query($sql);//执行语句赋值给变量
  
 ?>
  
 <form id='form1'><!--输出表单头-->

<!--输出下拉列表框,并设定onchange响应事件,把省值传递过去-->

<select id='province'onchange='queryCity(this.options[this.selectedIndex].value)'>
  
 <!--输出下拉列表项值-->

<option value='-1' selected>请选择省份</option>
  
 <?php
  
 while($row=mysql_fetch_row($result)){
  
 //循环循环查询显示省输出数据显示
    
   echo "<option
value='$row[1]'>$row[2]</option>\n";

}
  
 ?>
  
 </select><!--下拉列表项尾数-->

<span id='city'></span><!--显示数据的城市的位置-->

<span id='area'></span><!--显示数据的城市的位置-->

</form><!--表单项结尾-->
</body>
</html>

data.php 代码

<?php
$provincecode=$_GET['provincecode'];//接收省键值
$citycode=$_GET['citycode'];//接收城市键值
$conn=mysql_connect("localhost","root","root");//连接主机
mysql_select_db("novel");//选择数据库
mysql_query("set
names 'utf8'");
if($provincecode!=""){//如果传递过来的不为空则执行
  
 $sql="select *
from city where provincecode=$provincecode";//查询城市符合属于上边传递过来的省的字段
  
 $result=mysql_query($sql);//执行SQL查询语句
  
 print_r($row);
?>
  
 <select
onchange='queryArea(this.options[this.selectedIndex].value)'><!--下拉列表框开头-->

<option value='-1'
selected>请选择城市</option><!--下拉列表框值开头-->

<?php while($row=mysql_fetch_row($result)){//循环记录集?>
    
   <option
value="]?></option>

<?php }?>
  
 </select>
<?php }?>
<?php
  
 if($citycode!=""){
  
 $sql="select *
from area where citycode=$citycode";
  
 $result=mysql_query($sql);
  
 echo "<select>\n";

echo "<option value='-1'
selected>请选择县</option>\n";

while($row=mysql_fetch_row($result)){
    
   echo "<option value='$row[1]'>$row[2]</option>\n";

}
  
 echo "</select>\n";
}
?>

PHP+AJAX 地区三级联动代码的更多相关文章

  1. 省市区(县)三级联动代码(js 数据源)

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

  2. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  4. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  5. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  6. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  7. 非常不错的地区三级联动,js简单易懂。封装起来了

    首先需要引入area.js,然后配置并初始化插件: 例: <!-- 绑定银行卡开始 --> <script src="js/area.js"></sc ...

  8. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  9. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

随机推荐

  1. 查看UDP连接情况

    运行界面,输入"CMD"命令; 在命令提示符界面中,输入"netstat -s -p udp"命令,按回车.即可显示本机所有UDP连接情况.

  2. 利用php函数mkdir递归创建层级目录

    项目开发中免不了要在服务器上创建文件夹,比如上传图片时的目录,模板解析时的目录等.这不当前手下的项目就用到了这个,于是总结了几个循环创建层级目录的方法. php默认的mkdir一次只能创建一层目录,而 ...

  3. Tomcat的class加载的优先顺序

    Tomcat的class加载的优先顺序一览 1.最先是$JAVA_HOME/jre/lib/ext/下的jar文件. 2.环境变量CLASSPATH中的jar和class文件. 3.$CATALINA ...

  4. Redis 从数据库配置

    通过持久化功能,Redis保证了即使在服务器重启的情况下也不会损失(或少量损失)数据.但是由于数据是存储在一台服务器上的,如果这台服务器的硬盘出现故障,也会导致数据丢失.为了避免单点故障,我们希望将数 ...

  5. linux仅修改文件夹权限;linux 分别批量修改文件和文件夹权限

    比如我想把/var/www/html下的文件全部改成664,文件夹改成775,怎么做呢 方法一: 先把所有文件及文件夹改成664,然后把所有文件夹改成775 root@iZ25bq9kj7yZ:/ c ...

  6. activity管理类 appManager

    程序启动第一个界面类: net.oschina.app.AppStart功能描述:一张图片代码细节描述:一个透明度的动画效果,效果动画完成后自动启动新的Activity(Main) 基本BaseAct ...

  7. httpwebrequest 模拟登录 获取cookies 以前的代码,记录备忘!

    2个类,一个基类,一个构建头信息调用类 关于如何获取到post中的内容,你之需要用http抓包工具把你与目标网站的请求信息抓下来后,打开分析下按照抓下来的包中的数 据进行构建就行了 using Sys ...

  8. javascript 用call来继承实例属性

    xxx.call(thisObj, arg1,...)的调用可以改变当前函数的执行环境为传入的thisObj对象.利用这一点可以实现继承————当前的对象获得XXX的属性和方法. 例子: functi ...

  9. 白话解释IIS并发连接数

    做负载均衡的时候会发现有很多并发数的参数.其中有一个"IIS并发连接数"是我们要关注的. 假设"IIS并发连接数"显示为1000,这并不代表有1000个客户端在 ...

  10. 货物搬运(move)

    货物搬运(move) 题目描述 天地无情人有情,一方有难八方支援!汶川大地震发生后,灾区最紧缺的是救灾帐篷,全国各地支援的帐篷正紧急向灾区运送.假设围绕纹川县有环行排列的n个救灾帐篷的存储点,每个存储 ...