百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动:
下面是我做三级联动下拉的步骤以及逻辑
第一步:先做一个省市区表格
第二步:建个PHP页面显示用我是在
里放
第三步:写封装方法用JS
第四步:做个纯php处理页面,这个页面处理传过来的任何代号
首先我们要建立数据库:
这就是包含省,市,县的数据库。
下面我们就写主页面:sanji.php:
Document
然后就是js文件:
// JavaScript Document
$(document).ready(function(e){
//向div里面仍三个下拉
var str = "";
$("#sanjiliandong").html(str);//三个下拉显示
//当省选中的话市也会跟着变去也会变。市和区都会加载一遍
FillSheng();//省
FillShi();//市
FillQu();//区
//给省加点击事件
$("#sheng").change(function(){
FillShi();//市
FillQu();//区
})
//给市加点击事件
$("#shi").change(function(){
FillQu();//区
})
});
//做三个方法分别为省市区
//填充省的方法,如何在表里查询 出省的代号例如:北京0001、天津0001,中国下面所有省都是0001开头的
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循环...length长度
for(var i=0;i
{
//把行的索引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循环...length长度
for(var i=0;i
{
//把行的索引i在拆下.列与列的分隔符再拆
var lie = hang[i].split("^");//这是列的数组
str += ""+lie[1]+"";
}
$("#shi").html(str);
}
});
}
//填充区的方法
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
//返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组
var hang = data.split("|");
var str = "请选择乡县";
//把行的数组遍历下用for循环...length长度
for(var i=0;i
{
//把行的索引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);
显示效果如下:
这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。
百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动相关推荐
- html5手机端三级联动城市选择代码,省市县三级联动(jQuery手机端收货地址选择地区代码)...
[实例简介] [实例截图] [核心代码] jQuery手机端收货地址选择代码 - 站长素材 默认调用 所在地区: 设置默认值 所在地区: /** * 默认调用 */ !function () { va ...
- 前端、后端,数据结构,编程语言,微信小程序,英语,理综,PS,MySql,Python,JS,Jquery,Ajax,免费百度云资源链接
高中英语知识点汇总百度云: 链接:HTTPS://pan.baidu.com/s/1X0ELSe7LorfLAzNMrUpkxA密码:byo5 英语基础语法百度云: 链接:HTTPS://pan.ba ...
- jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 ...
- jquery省市县三级联动
Jquery省市县三级联动,数据来源js,无需调用接口 可前往本人发布资源<Jquery省市县三级>免积分下载 目录 效果 html部分 <!DOCTYPE html> < ...
- jq ajax 读取本地文件,jquery读取本地文件
$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquer ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- 【Ajax Servlet JSP MySQL】Ajax实现省份地区选择:三级联动
三级联动效果展示 环境 Eclipse for Java EE MySQL数据库 相关使用语言 Java(Java,Servlet后台处理) Web(HTML,CSS,JS,JSON,GSON.JS与 ...
- jQuery里如何使用ajax发送请求
回到文章总目录 本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...
- 完整,详细的基于jquery省市三级联动和基于angular的省市三级联动对比
前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...
最新文章
- Facebook恐打破最长月度连跌记录,黄金时代宣告结束!
- 微积分笔记(一)--预备知识
- pid控制从入门到精通pdf_网络工程师从入门到精通通俗易懂系列 | 访问控制列表ACL原来还可以这样理解,果断收藏!...
- 消防信号总线原理_建筑电气消防设计6大常见问题分析
- [Json] C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json (转载)...
- arthas用的好好的,写个lambda表达式就跪了?该咋解决?
- Spark记录-Scala记录(基础程序例子)
- 学习simple.data之基础篇
- Oracle技术之和外键相关的阻塞和死锁问题总结(一)
- 矩阵论7,8,9作业
- 文件加密新招--WinRAR文件加密(上)
- 第二章-信源与信息熵(一)
- 【U+】通用财务修改财务参数:业务生成的会计凭证不允许修改
- mysql relaylog清理_mysql 清除relay-log文件方法详解
- 《智慧工地单点解析系列(四)—— 安全管理》
- Nginx实现域名跳转
- 后端开发java与php,【后端开发】java与php的区别是什么
- PX90---Lags Backs
- ubuntu14.04LTS安装steam
- 大学生笔记本选购指南(2018)