要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript;第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文件;第三个php文件就是我们所做的封装数据库类文件

1.第一个php  JavaScript文件

<!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" />
<script src="jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>
<br />
<h1>全国各地的省,市,区</h1>
<div id="sj"></div>

<body>
<script type="text/javascript">

$(document).ready(function(e) {

//在div里造下拉菜单
$("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

//填充数据 使用Fill 关键字
FillSheng(); //填充省的数据
FillShi(); //填充市的数据
FillQu(); //填充区的数据

//填充省的方法
function FillSheng(){

var code = "0001"; //省的父级代号

$.ajax({

url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");

var str = "";

for(var i=0;i<hang.length;i++){

var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
//把所有<option>放到省的下拉列表里
$("#sheng").html(str);

}

});

}

//填充市的方法
function FillShi(){

var code = $("#sheng").val(); //市的父级代号

$.ajax({

url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){

var hang = data.split("|");

var str = "";

for(var i=0;i<hang.length;i++){

var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
//把所有<option>放到市的下拉列表里
$("#shi").html(str);

}

});

}

//填充区的方法
function FillQu(){

var code = $("#shi").val(); //区的父级代号

$.ajax({
url:"sheng_2_chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
async:false,
success: function(data){
var hang = data.split("|");
var str = "";

for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");

str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
//把所有<option>放到区的下拉列表里
$("#qu").html(str);
}

});

}

//当点击选择哪个省的时候,市和区一起变
$("#sheng").change(function(){
FillShi();
FillQu();

});

//当点击选择哪个市的时侯,区一起变
$("#shi").change(function(){
FillQu();

});

});

</script>

</body>
</html>


2.第二个php  处理文件

<?php
include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["code"];

$sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = '{$pcode}'";

echo $db->StrQuery($sql);
?>


3.第三个php  封装数据库类文件

<?php
class DBDA
{
public $host="localhost";
public $uid="root";
public $pwd="root";
public $dbname="mydb";

public function Query($sql,$type=1)
{
$db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);
$result=$db->Query($sql);
if($type=="1")
{
return $result->fetch_all();

}else
{
return $result;
}
}

public function StrQuery($sql,$type=1)
{
$db=new mysqli($this->host,$this->uid,$this->pwd,$this->dbname);
$result=$db->Query($sql);
if($type=="1")
{
$arr= $result->fetch_all();
$str="";
foreach($arr as $v)
{
$str = $str.implode("^",$v)."|";
}
return substr($str,0,strlen($str)-1);
}else
{
return $result;
}
}
}


效果如图所示:

用php和ajax写一个省市区的三级联动,实现地区的下拉选择的更多相关文章

  1. 在JavaScript文件中用ajax方法实现省市区的三级联动

    1.JavaScript Document $(document).ready(function(e) { 加载三个下拉列表 $("#sanji").html("< ...

  2. 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载

    用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分   Export 2.工具类:TxtFileU ...

  3. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  4. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  5. JavaScript实现省市区的三级联动

    JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  6. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  7. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

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

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

  9. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

随机推荐

  1. POJ 2661

    #include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...

  2. Oracle修改日志归档模式、归档路径以及空间大小的相关测试

    ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...

  3. CentOS安装Nginx 以及日志管理

    环境:CentOS-6.4 Nginx版本:nginx-1.6.2.tar Linux连接工具:XShell VMWare虚拟机上准备两台CentOS: 两台机器做同样操作(后边做负载均衡.高可用的时 ...

  4. Android之apk优化

    公司的apk越做越大...作为一个有追求的程序员,我觉得有必要给apk瘦身了... 优化之前,先来分析一下apk结构,下面附上一张apk结构图: apk结构.png 由于我这个项目集成了百度地图.百度 ...

  5. 执行HBase shell时出现ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet错误解决办法(图文详解)

    不多说,直接上干货! [kfk@bigdata-pro01 bin]$ jps NameNode ResourceManager JournalNode HMaster DataNode HRegio ...

  6. 【转】谷歌三大核心技术(一)The Google File System中文版

      The Google File System中文版 译者:alex 摘要 我们设计并实现了Google GFS文件系统,一个面向大规模数据密集型应用的.可伸缩的分布式文件系统.GFS虽然运行在廉价 ...

  7. Linux 数据重定向

    名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...

  8. 自己实现IOC过程

    阅读了<架构探险>这本书之后简单梳理一下自己实现IOC的基本流程 首先要自己定义一个注解 import java.lang.annotation.ElementType; import j ...

  9. JSON知识点

    什么是JSON? JSON是Javascript Object Notation(Javascript对象表示法)的缩写,是一种数据格式,而并非一种编程语言. 语法 JSON的语法可以表示以下三种类型 ...

  10. 自定义MVC的Helper扩展方法

    记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...