基于jQuery的AJAX实现三级联动菜单
效果图
废话不多说，先看效果图
代码
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<script src="./js/index.js"></script>
<title>基于jQuery的AJAX实现三级联动菜单</title>
</head>
<body>
<div>
<div class="card">
<form class="form">
<span><b>省 份:</b></span>
<select name="province" id="province">
<option value="0">--请选择--</option>
</select>
<span><b>城 市:</b></span>
<select name="city" id="city">
<option value="0">--请选择--</option>
</select>
<span><b>地 区:</b></span>
<select name="area" id="area">
<option value="0">--请选择--</option>
</select>
</form>
</div>
</div>
</body>
<script>
$(function () {
//调用函数
getCountry();
// 选项节点获取code --province Code
$("#province").change(function () {
CountryId = $("#province").val();
// console.log(FatherId);
getCity(CountryId);
CityID = $("#city").val();
// console.log(CityID);
getArea(CityID);
});
// 选项节点获取code --City Code
$("#city").change(function () {
CityID = $("#city").val();
// console.log(CityID);
getArea(CityID);
})
})
</script>
</html>
JS代码
// Ajax获取数据,本地json文件
function getData() {
$.ajax({
url: './json/third-level-address.json', // 本地json文件位置
type: 'get', // ajax 获取方式
async: false, // 是否异步
success: function (data) { // 成功,返回data
if (data == "error") {
alert("系统错误");
return;
}
dataJson = data;
}
});
return dataJson; //返回json数据
}
// 获取province(省)
function getCountry() {
var data = getData(); // 获取json数据
var options = "<option value='0'>--请选择--</option>"; //定义初始选项
for (var i in data) { //循环json数据
options += "<option value='" + data[i].code + "' selected>" + data[i].name + "</option>"; // 给选项(options) 添加属性value以及显示的数据(城市名称)
$("#province").html(options); // 通过jQuery 将选项添加到下拉框(province)
}
}
// 获取City(城市)
function getCity(countryCode) { // 参数 :countryCode 是json 数据中省份的 Code
var data = getData(); // 获取json数据
$('#city').empty(); // 先置空city的选项,无所谓
var options = "<option value='0'>--请选择--</option>"; //定义初始选项
for (var i in data) { //循环json数据
for (let j = 0; j < data[i].children.length; j++) { // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
if (countryCode && countryCode == data[i].code) { // 通过Code 判断来显示城市
options += "<option value='" + data[i].children[j].code + "' selected>" + data[i].children[j].name + "</option>"; // 这里注意:children[j],一定要是j,如果填写[i],会超过城市的数量(数组越界)会报错!!!
}
}
$("#city").html(options); // 通过jQuery 将选项添加到下拉框(city)
}
}
// 获取Area(区域)
function getArea(cityCode) { // 参数 :cityCode 是json 数据中市的 Code
var data = getData(); // 获取json数据
var options = "<option value='0'>--请选择--</option>"; // 定义初始选项
for (var i in data) { //循环json数据
for (let j = 0; j < data[i].children.length; j++) { // 这个循环是判断省份下面城市的数量,不循环,获取不到其他的城市,只能获取一个
for (let k = 0; k < data[i].children[j].children.length; k++) { // 这里的循环是获取城市城市下面区域的数量长度,同上,否则只会获取一个数据
if (cityCode && cityCode == data[i].children[j].code) { // 通过Code 判断来显示区域
options += "<option value='" + data[i].children[j].children[k].code + "' selected>" + data[i].children[j].children[k].name + "</option>"; // 这里的children[j].children[k]同上,否则数组越界报错
}
}
}
$("#area").html(options); // 通过jQuery 将选项添加到下拉框(area)
}
}
CSS 代码
body {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
select {
/* background: #fafdfe; */
background: transparent;
height: 28px;
width: 180px;
line-height: 28px;
border: 1px solid #9bc0dd;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 50px;
border-color: #54b5a6;
outline-color: #ebadb6;
/* color: rgb(2, 60, 29); */
margin-top: 10px;
}
.form {
width: 180px;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
text-align: center;
}
.card {
width: 250px;
height: 254px;
background: linear-gradient(135deg, #ebadb6 0%, #aceae1 100%);
border-radius: 7px;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
JSON文件下载
来源：蓝奏云
文件结构
下载
[erphpdown]
来源：蓝奏云 | 提取码:bpkk
[/erphpdown]
阅读剩余
THE END
