用php和ajax写一个省市区的三级联动,实现地区的下拉选择
要实现这个页面的三级联动,我们需要建立三个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写一个省市区的三级联动,实现地区的下拉选择的更多相关文章
- 在JavaScript文件中用ajax方法实现省市区的三级联动
1.JavaScript Document $(document).ready(function(e) { 加载三个下拉列表 $("#sanji").html("< ...
- 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载
用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分 Export 2.工具类:TxtFileU ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- 中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
- 省市区(县)三级联动代码(js 数据源)
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
随机推荐
- POJ 2661
#include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...
- Oracle修改日志归档模式、归档路径以及空间大小的相关测试
ORACLE 创建数据库的时候要不要开启日志归档? oracle数据库可以运行在2种模式下:归档模式(archivelog)和非归档模式(noarchivelog) .归档模式可以提高Oracle数据 ...
- CentOS安装Nginx 以及日志管理
环境:CentOS-6.4 Nginx版本:nginx-1.6.2.tar Linux连接工具:XShell VMWare虚拟机上准备两台CentOS: 两台机器做同样操作(后边做负载均衡.高可用的时 ...
- Android之apk优化
公司的apk越做越大...作为一个有追求的程序员,我觉得有必要给apk瘦身了... 优化之前,先来分析一下apk结构,下面附上一张apk结构图: apk结构.png 由于我这个项目集成了百度地图.百度 ...
- 执行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 ...
- 【转】谷歌三大核心技术(一)The Google File System中文版
The Google File System中文版 译者:alex 摘要 我们设计并实现了Google GFS文件系统,一个面向大规模数据密集型应用的.可伸缩的分布式文件系统.GFS虽然运行在廉价 ...
- Linux 数据重定向
名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...
- 自己实现IOC过程
阅读了<架构探险>这本书之后简单梳理一下自己实现IOC的基本流程 首先要自己定义一个注解 import java.lang.annotation.ElementType; import j ...
- JSON知识点
什么是JSON? JSON是Javascript Object Notation(Javascript对象表示法)的缩写,是一种数据格式,而并非一种编程语言. 语法 JSON的语法可以表示以下三种类型 ...
- 自定义MVC的Helper扩展方法
记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...