第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 ...
随机推荐
- 20155318 《Java程序设计》实验四 （Android程序设计）实验报告
20155318 <Java程序设计>实验四 (Android程序设计)实验报告 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android.组 ...
- 实验一 Java开发环境的熟悉（Linux+Eclipse)
实验一 Java开发环境的熟悉(Linux+Eclipse) 在Linux或Window或macOS中命令行下运行Java 在Linux 或Window或 macOS环境中 IDEA中调试设置断点 实 ...
- odoo学习之:在tree view中显示部分数据domain的使用
只要在window.action中他添加相应东domain即可,如: <!-- 树型列表 --> <record model="ir.actions.act_window& ...
- sql语句-3-聚合数据查询
- pyqt5 菜单，工具栏，线程，matplotlib
import sys from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import QMainWindow, QMenuBar, QToolBar ...
- 【转载】TCP/IP 之 大明王朝邮差
原文:TCP/IP 之 大明王朝邮差 原创 2016-05-12 刘欣 码农翻身 前言: 本文主要想说一下TCP的知识, 比喻有不恰当之处,敬请包涵. 大明王朝天启四年, 清晨. 天色刚蒙蒙亮,我就赶 ...
- day1 Ubuntu 使用
ctrl + shift + + 放大终端 ctrl + - 缩小终端 软连接,硬链接 ln python@ubuntu:~/Desktop$ vim .txt python@ubuntu ...
- Objective-C 方法交换实践（一） - 基础知识
一.Objective-C 中的基本类型 首先看下 Objective-C 的对象模型,每个 Objective-C 对象都是一个指向 Class 的指针.Class 的结构如下: struct ob ...
- loj2538 「PKUWC 2018」Slay the Spire
pkusc 快到了--做点题涨涨 rp. ref我好菜啊QAQ. 可以发现期望只是一个幌子.我们的目的是:对于所有随机的选择方法(一共 \(\binom{2n}{m}\)种),这些选择方法都最优地打出 ...
- JS中的eval函数
最近开始慢慢学习前端的脚本了,上次碰到了一个问题,需要通过一个对象的属性名称来获得这个对象这个属性的值.如果在C#中,那么直接通过反射就可以了.而在js中,也有类似的函数,那就是eval ...