可以把它做成小插件的形式，以后需要，可以随时调

来看一下怎么来做

先来写个div然后，再引入js包

无标题文档

引入的js文件，取名为sanji.js

然后来看看js文件是怎么写的

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

//向DIV里面扔三个下拉

var str = "";

$("#sanji").html(str);

FillSheng();

FillShi();

FillQu();

//选中项变化

$("#sheng").change(function(){

FillShi();

FillQu();

})

$("#shi").change(function(){

FillQu();

})

});

//填充省的方法

function FillSheng()

{

var pcode = "0001"; //父级代号

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){ //回调函数

var hang = data.split("|"); //根据行与行的分隔符来拆

var str = "";

for(var i=0;i

{

var lie = hang[i].split("^"); //列与列的分隔符来拆

str += ""+lie[1]+""; //中间显示地区名称

}

$("#sheng").html(str); //把显示的地区名称填充进去

}

});

}

//填充市的方法

function FillShi()

{

var pcode = $("#sheng").val();

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

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

var str = "";

for(var i=0;i

{

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

str += ""+lie[1]+"";

}

$("#shi").html(str);

}

});

}

//填充区的方法

function FillQu()

{

var pcode = $("#shi").val();

$.ajax({

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

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

var str = "";

for(var i=0;i

{

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

str += ""+lie[1]+"";

}

$("#qu").html(str);

}

});

}

只要写出一个来，其他两个和上面一个原理是一样的

再来看处理页面，三项用一个处理页面

看一下处理页面的代码

include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["pcode"];

$sql = "select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

数据库的地区表是chinastates

根据传过来的父级代号来查所有数据

最后运行起来的效果是这样的

来看一下数据库的内容

数据库内容很多，三级联动里的地区名称都在里面，采用的是代号副代号的方式

比如说北京吧，北京的代号是11，它下面的北京市副代号就11， 北京市的主代号是1101，北京市下面的地区副代号就是1101，调地区的时候可以根据主代号查询和它相同的副代号，就能查询出来

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

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

Ajax做无刷新三级联动

1.引入JS and Jquery包 quot ...

Android 省市县 三级联动(android-wheel的使用)[转]

转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

Android 省市县 三级联动(android-wheel的使用)

转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

ASP.NET 三级联动

三级联动就是用三个下拉列表框DropDownList,每个里面添加相应的东西,在第一个列表框中选择一个值,第二三个列表框都会根据第一个选择进行相应的变化,在第二个列表框中选择一个值,第三个列表框也会根 ...

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

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

& ...

用php+mysql+ajax+jquery做省市区三级联动

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

基于Jquery实现省份、城市、区县三级联动

前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码:

WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)

近期在实现收货地址功能,用到了省市区三级联动效果,网上找到一般都是xml或json.数据源陈旧改动麻烦.改动了一下使用数据库方式实现了一下 数据源解决.因为数据量比較大通过初始化批量运行SQL的方式不 ...

随机推荐

Ruby--学习记录(实时更新)

变量的命名方式决定了变量的种类: 局部变量  以英文字母或者_开头: 全局变量  以$开头: 实例变量  以@开头: 类变量     以@@开头:

自定义tld标签，页面使用

背景需求: 系统本身的session不能在页面使用 如下: controller: @RequestMapping(method=RequestMethod.GET) public String ge ...

bad interpreter: No such file or directory

经常会遇到这种情况,在windows下写的脚本,代码会在linux下无法执行,错误就是: bad interpreter: No such file or directory 1.原因 这通常都是由于 ...

POJ 1699 Best Sequence (DFS+预处理)

意甲冠军:看图片是晶莹剔透的,正确的, N连接到第一序列(同样的序列部分).总序列获得最短. 主题链接:http://poj.org/problem?id=1699 ~~~~ 思路就是:将N个序列首尾 ...

MHA-Atlas-MySQL高可用集群2

MHA脚本管理方式 (1)获取管理脚本master_ip_failover 提示:yum安装的manager是没有这个脚本的. 我们需要从manager的源码包里复制一个.   [root@mysql ...

React Native布局

一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...

微信小程序之for循环

在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关 ...

OVS 内核KEY值提取及匹配流表代码分析

原文链接:http://ry0117.com/2016/12/24/OVS内核KEY值提取及匹配流表代码分析/ 当开启OVS后,创建datapath类型为system的网桥并他添加相关接口,OVS网桥 ...

CCF CSP 201412-3 集合竞价

CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201412-3 集合竞价 问题描述 某股票交易所请你编写一个程序,根据开盘前客户提交的订单来确 ...

CenoOS下如何对mysql编码进行配置

1 修改/etc/mysql/my.cnf配置文件 增加default-character-set=utf8 配置文件如下 [client] port = 3306 socket = /var/run ...