JQuery+Ajax實現省市區三級聯動（附效果圖+資料庫）
阿新 • • 發佈：2019-01-09
一、效果圖
1、頁面載入後（初始化：北京市-北京市-東城區）
2、單擊選擇省份後（改變成：河北省-石家莊市-長安區）
二、jsp頁面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市區三級聯動</title>
<script type="text/javascript" src="/airticleMgr/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
// 初始化省市區
initAddress();
// 更改省份後的操作
$("select[name='province']").change(function() {
var provCode = $("select[name='province']").val();
getCity(provCode);
});
// 更改城市後的操作
$("select[name='city']").change(function() {
var cityCode = $("select[name='city']").val();
getArea(cityCode);
});
});
function initAddress() {
var firstProvCode;
// ajax請求所有省份
$.get("/airticleMgr/address", {
method : "initProvince"
}, function(data) {
$.each(data, function(i, d) {
$("select[name='province']").append(
"<option value='"+d.provinceCode+"'>" + d.provinceName
+ "</option>");
});
// 獲取第一個省份的code
firstProvCode = data[0].provinceCode;
// 根據第一個省份code獲取對應城市列表
getCity(firstProvCode);
}, 'json');
}
//獲取對應城市列表（裡面包括獲取第一個城市的區縣列表）
function getCity(provCode) {
var firstCityCode;
// ajax請求所有市級單位
$.get("/airticleMgr/address", {
method : "getCity",
provCode : provCode
}, function(data) {
// 先清空城市下拉框
$("select[name='city']").empty();
$.each(data, function(i, d) {
$("select[name='city']").append(
"<option value='"+d.cityCode+"'>" + d.cityName
+ "</option>");
});
// 獲取第一個城市的code
firstCityCode = data[0].cityCode;
// 根據第一個城市code獲取對應區縣列表
getArea(firstCityCode);
}, 'json');
}
function getArea(cityCode) {
// ajax請求所有區縣單位
$.get("/airticleMgr/address", {
method : "getArea",
cityCode : cityCode
}, function(data) {
// 先清空區縣下拉框
$("select[name='area']").empty();
$.each(data, function(i, d) {
$("select[name='area']").append(
"<option value='"+d.areaCode+"'>" + d.areaName
+ "</option>");
});
}, 'json');
}
</script>
</head>
<body>
<h2>省市區三級選單聯動</h2>
請選擇：
<select name='province'></select>
<select name='city'></select>
<select name='area'></select>
</body>
</html> 省、市、區分別建三張表（部分資料截圖）
省份：
城市：
區縣：
附sql指令碼：
/*
SQLyog Ultimate v9.10
MySQL - 5.1.73-community : Database - novel
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;
/*!40101 SET SQL_MODE=''*/;
/*!40014 SET @[email protected]@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @