使用JQuery和Ajax的形式实现省市县三级联动
所需资源
JQuery：jquery-1.8.3.min.js
全国城市的JSON数据：city.json
创建目录结构
-demo 工程名
--js 目录
---jquery-1.8.3.min.js jQuery依赖
--data 目录
---city.json 城市的json数据
--index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="" id="province">
<option value="">----请选择省份----</option>
</select>
<select name="" id="city">
<option value="">----请选择城市----</option>
</select>
<select name="" id="area">
<option value="">----请选择地区----</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script>
//所有的数据
var allData;
var province;//省份
//某个省份下当个城市
var city;
var areas;
$.ajax({
url:"data/city.json",
dataType:"json",
type:"GET",
success:function(data){
allData = data.city;
//console.log(allData);
for (var i = 0; i < allData.length; i++) {
//遍历json中的省份，将数据写入第一个省份的下拉列表中
province = allData[i].name;
$("#province").append("<option>"+province+"</option>");
}
}
});
//给第一个省份下拉列表添加change事件
$("#province").change(function(){
//移除之前选择的数据
$("#city").children().not(":first").remove();
//让area处于默认状态
//移除之前选择的数据
$("#area").children().not(":first").remove();
//this.value表示当前改变的下拉框的值
for (var i = 0; i < allData.length; i++) {
province = allData[i].name;
//如果当前下拉列表的值与city中省份的值一样，则在第二个下拉框中显示其省份的城市
if(this.value==province){
//allData[i].city表示所有的city数组
for (var j = 0; j < allData[i].city.length; j++) {
//获取指定省份的单个城市name
city = allData[i].city[j].name;
$("#city").append("<option>"+city+"</option>");
}
}
}
});
//给第二个城市下拉列表添加change事件
$("#city").change(function(){
for (var i = 0; i < allData.length; i++) {
for (var j = 0; j < allData[i].city.length; j++) {
city = allData[i].city[j].name;
//allData[i].city[j].area表示当前城市的所有地区
areas = allData[i].city[j].area;
if(this.value==city){
for (var k = 0; k < areas.length; k++) {
//console.log(areas[k]);
$("#area").append("<option>"+areas[k]+"</option>");
}
}
}
}
});
</script>
</body>
</html>
效果
评论区