html实现省市县选择,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);
显示效果如下:
这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html实现省市县选择,jQuery ajax实现省市县三级联动相关推荐
- 百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动
下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在 里放 用来接收要显示的省市区表格信 ...
- jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...
- [Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动
案例 jQuery的三级联动 server2.json代码展示 [{"province": "吉林省","cities": [{" ...
- ajax加php实现三级联动
js代码 <script type="text/javascript"> function get_next(t,pid){ //当前元素的id,当前opti ...
- Ajax省市地区下拉列表三级联动
SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]([Id] [int] NULL,[Name] [varchar](50) NULL,[order ...
- Android年月日选择,Android日期选择器实现年月日三级联动
最近项目里面用到了一个日期选择器,实现现在主流的WheelView滑动选择,整理了下,做了个Demo.废话不多说,直接上代码. 主布局:activity_main.xml xmlns:tools=&q ...
- java mvc jquery weui_jquery weui做的三级联动
} $("#province").select({ title:"选择省份", items: res, onChange:function() {varprov ...
- ajax js java省市三级联动菜单,AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有javascript中的代码为: $(document). ...
- PHP + jQuery + Json 实现中国省市区三级联动
定义省市区结构的JSON文件代码: city.data.js: var cityData = [{value: '110000',text: '北京市',children: [{value: &quo ...
- 中国省市区三级联动实例(AJAX实现)
本文利用ajax实现一个省市区三级联动示例: 1.测试页面(test.htm) <!DOCTYPE html> <html> <head> <title> ...
最新文章
- sublime支持虚拟环境python2.7
- 技术分享 | 一条神奇的曲线——贝塞尔曲线在前端的应用
- teststand调用python模块_TestStand 基本知识[10]--在序列中调用代码模块之--LabVIEW
- Android系统开发智能机器人,Android智能机器人详解
- 删除排序数组中的重复数字
- 使用template扩展已有的DDX_Text函数,使扩展能够同时支持各种数据类型的一个例子...
- mysql免安装版的下载与安装
- lr压测mysql数据库_MySQL数据库性能测试的方法
- java调用Shell脚本
- Python爬虫【一】爬取移动版“微博辟谣”账号内容(API接口)
- 富媒体消息和传统短信有何区别?
- redis 入门+掌握
- 2022南理工824专考研经验
- Eclipse汉化方法以及汉化包
- php新闻删除功能设计,PHP开发 新闻发布系统之新闻删除页面
- Couchbase评论:智能NoSQL数据库
- DASCTF Oct X 吉林工师-欢迎来到魔法世界-misc-魔法少女的迷音(复现)
- 高效的技术图纸管理系统有哪些价值
- 自考-知识点总结-数据库系统原理 04735
- VAV空调系统类毕业论文文献包含哪些?
热门文章
- 彻底理解数字图像处理中的卷积-以Sobel算子为例
- [论文评析] ICLR,2021,An image is worth 16x16 words-transformers for image recognition at scale
- CatBoost之算法解析(Kaggle常用模型)
- 201906017学习小程序
- 如何修改leaflet的marker图标
- 【UOJ#177】欧拉回路
- idea导入本地idea的web项目(服务器用的是tomcat)
- 第一章:开始启程-你的第一行Android代码
- 自己实现LinkedList类
- 【权限设计】如何以“权限”为单位的进行权限设计(二)