第117天：Ajax实现省市区三级联动
Ajax实现省市区三级联动
思路：
（1）首先获取省份信息
（2）发起Ajax请求，注意dataType中的T大写
（3）封装回调函数，回调函数success中用$.each循环每一条数据，动态创建option，并将数据添加到option中
（4）定义点击事件，注意点击省调用的是city函数，点击市调用的是area函数
（5）注意获取市信息用的是省编码（pCode），获取区用的是市编码（cCode）。
1、HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<style type="text/css">
#showInfo{
position: absolute;
width: 600px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
background: lightgreen;
left: 50%;
margin-left: -300px;
}
#showInfo div{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 160px;
}
#showInfo div select{
width: 160px;
}
</style>
<script type="text/javascript" src="./jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function() {
//获取列表数据的通用方法
function getList(code,flag,callback){
$.ajax({
url:'./data.php',
type:'get',
dataType:"jsonp",
data:{citycode:code,flag:flag},
success:callback
});
}
//获取地区信息的回调函数
var area = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#area").append(op);
});
}
//获取市信息的回调函数
var city = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#city").append(op);
});
//判断是否为直辖市
if(data.length == 1){
var citycode = $("#city").children("option").eq(0).attr("value");
getList(citycode,3,area);
} }
//获得省份信息的回调函数
var province = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#province").append(op);
});
//默认北京市
getList('110000',2,city);
getList('110100',3,area);
} //发送请求获取省份信息
getList(0,1,province); //给省份信息设置选择事件
$("#province").change(function() {
$("#city").children("option").remove();
$("#area").children("option").remove();
var pcode = $(this).val();
getList(pcode,2,city);
}); //给市信息设置选择事件
$("#city").change(function() {
$("#area").children("option").remove();
var citycode = $(this).val();
getList(citycode,3,area);
}); });
</script>
</head>
<body>
<div id="showInfo">
<div>
<select id="province">
</select>
</div>
<div>
<select id="city">
</select>
</div>
<div>
<select id="area">
</select>
</div>
</div>
</body>
</html>
HTML优化版代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<style type="text/css">
#showInfo{
position: absolute;
width: 600px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
background: lightgreen;
left: 50%;
margin-left: -300px;
}
#showInfo div{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 160px;
}
#showInfo div select{
width: 160px;
}
</style>
<script type="text/javascript" src="./jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
function callback(id,code,flag){
$.ajax({
url:"./data.php",
type:"get",
dataType:"jsonp",
data:{citycode:code,flag:flag},
success:function(data){
$.each(data,function(i,element){//i表示索引,element表示每一项
var op= $("<option></option>").attr("value",element.code).append(element.name);//创建option,设置value属性,将name添加到option中
$("#"+id).append(op);//将op添加到province中
}); }
});
} var area=function(cCode){
callback('area',cCode,3);
}; var city=function(pCode){
callback('city',pCode,2);
};
//获取省份信息
var province=function(pCode){
callback('province',pCode,1);
}; //调用获取的省份信息
province(0);
city('110000');
area('110100'); //给省份注册选中事件
$('#province').change(function(){
$("#city").children("option").remove();//点击省，清空市
var pCode=$(this).val();
city(pCode);
});
//给市注册事件
$('#city').change(function(){
$("#area").children("option").remove();//点击市，清空区
var cCode=$(this).val();
area(cCode);
}); }); </script>
</head>
<body>
<div id="showInfo">
<div>
<select id="province">
</select>
</div>
<div>
<select id="city">
</select>
</div>
<div>
<select id="area">
</select>
</div>
</div>
</body>
</html>
2、data.php代码
<?php
require_once('connect.php'); $code = $_GET['citycode'];//获取省市区的编码
$callback = $_GET['callback'];
$flag = $_GET['flag'];//标志位，用来区分是省市区哪个
//查询省市区对应的列表数据
if($flag == 1){
$query=mysql_query("select * from province order by id");
}else if($flag == 2){
$query=mysql_query("select * from city where provincecode = '".$code."' order by id" );
}else if($flag == 3){
$query=mysql_query("select * from area where citycode = '".$code."' order by id" );
}
$sayList = [];
while ($row=mysql_fetch_array($query)) {
$sayList[] = array(
'code'=>$row['code'],
'name'=>$row['name']
);
}
if($sayList){
echo $callback.'('.json_encode($sayList).')'; }else{
echo $callback.'('.'[]'.')';
} ?>
3、连接数据库 connect.php
<?php
$host="localhost";
$db_user="root";
$db_pass="123456";
$db_name="mydb";
$timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8"); header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>
实现效果：
第117天：Ajax实现省市区三级联动的更多相关文章
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- 基于thinkphp和ajax的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- Ajax来实现下拉框省市区三级联动效果（服务端基于express）
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- 省市区三级联动（二）JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
随机推荐
- 20155216 2016-2017-2 《Java程序设计》第九周学习总结
20155216 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC架构 JDBC API的使用 JDBC连接数据库 1.导入JDBC包: 添加impo ...
- 2017-2018-1 20155320 《信息安全系统设计基础》第四周学习总结（课堂实践补交+myhead与mytail加分项目）
2017-2018-1 20155320 <信息安全系统设计基础>第四周学习总结(课堂实践补交+myhead与mytail实现) 课堂实践内容 1 参考教材第十章内容 2 用Linux I ...
- 20155320 实验四 Android程序设计
20155320 实验四 Android程序设计 实验内容 (一)Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for ...
- BZOJ2140_稳定婚姻_KEY
题目传送门 暴力直接对于每个点跑一遍二分图匹配,能拿四十分. 然而我们考虑正解. 对于一对Couple我们建♂->♀的一条边,对于一对曾经有恋情的情侣我们建♀->♂的一条边. 跑Tarja ...
- GitHub中webhooks的使用
目录 GitHub中的webhooks的配置 对配置的webhooks的进行测试 目前在团队在设计一个应用管理的功能,需要了解到常用代码托管的Webhooks的使用.GitHub中的webhooks首 ...
- halcon学习相关资料（转载）
https://blog.csdn.net/maweifei/article/details/78162581 论坛.培训 halcon学习网:http://www.ihalcon.com/ 鸟叔机器 ...
- nginx main函数
源代码: int ngx_cdecl main(int argc, char *const *argv) { ngx_int_t i; ngx_log_t *log; ngx_cycle_t *cyc ...
- Wampserver 修改根目录
wampserver 默认根目录在 www 文件夹下 修改根目录方法如下: 1. 在打算存放项目或代码的位置新建文件夹(我建在了C:/MyProject) 2. 打开 httpd.conf 文件(该文 ...
- 使用appcmd命令创建iis站点及应用程序池
参考文章:iis7 appcmd的基础命令及简单用法 验证环境:Windows 7 IIS7 AppCmd.exe工具所在目录 C:\windows\sytstem32\inetsrv\目录下, ...
- Beta周王者荣耀交流协会第六次会议
1.立会照片 成员王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:袁玥 2. 时间跨度 2017年11月15日 19:00 — 19:10 ,总计10分钟. 3. 地点 一食堂 ...