javaScript案例——二级联动、三级联动、省市区三级联动

最新推荐文章于 2023-05-28 10:52:10 发布

h_jQuery

最新推荐文章于 2023-05-28 10:52:10 发布

阅读量716

点赞数 1

分类专栏： javascript 学习 HTML

本文链接：https://blog.csdn.net/h_jQuery/article/details/115468767

版权

javascript js html5 dom html

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

学习

67 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

二级联动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/联动.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select name="" id="pros">
		</select>
		<select name="" id="citys">
		</select>
	</body>
</html>

var pros = ['广西', '广东', '湖北'];
var citys = [
	['南宁', '柳州', '桂林', '河池'],
	['广州', '珠海', '佛山', '中山'],
	['武汉', '宜昌']
];
window.onload = function() {
	var pro = document.getElementById('pros');
	var city = document.getElementById('citys');
	for (var i = 0; i < pros.length; i++) {
		var option = document.createElement('option');
		option.innerHTML = pros[i];
		pro.appendChild(option);
	}
	for (var i = 0; i < citys[0].length; i++) {
		var option = document.createElement('option');
		option.innerHTML = citys[0][i];
		city.appendChild(option);
	}
	pro.onchange = function() {
		// 判断select中选中的下标
		var index = pro.selectedIndex;
		var child = city.childNodes;
		var lenght = child.length;
		// 清空城市下拉框的内容
		console.log(child);
		for (var i = 0; i < lenght; i++) {
			city.removeChild(child[0]);
		};
		// 添加
		for (var i = 0; i < citys[index].length; i++) {
			var option = document.createElement('option');
			option.innerHTML = citys[index][i];
			city.appendChild(option);
		};
	}
}

三级联动：

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/三级联动.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select id="province" onclick="changeProvince()">
			
		</select>
		<select id="city" onclick="changeCity()">
			
		</select>
		<select id="area">
			
		</select>
	</body>
</html>

var data = {
	"province": [{
			"name": "广东省",
			"citylist": [{
					"name": "天河区",
					"arealist": [{
							"name": "岗顶"
						},
						{
							"name": "体育西路"
						},
						{
							"name": "东圃"
						}
					]
				},
				{
					"name": "白云区",
					"arealist": [{
							"name": "人和"
						},
						{
							"name": "嘉禾望岗"
						},
						{
							"name": "三元里"
						}
					]
				},
				{
					"name": "海珠区",
					"arealist": [{
							"name": "中大"
						},
						{
							"name": "广州塔"
						},
						{
							"name": "大塘"
						}
					]
				}
			]
		},
		{
			"name": "广西省",
			"citylist": [{
					"name": "桂林市",
					"arealist": [{
							"name": "七星"
						},
						{
							"name": "崖山"
						},
						{
							"name": "燕山"
						}
					]
				},
				{
					"name": "南宁市",
					"arealist": [{
							"name": "兴宁区"
						},
						{
							"name": "青秀区",
						},
						{
							"name": "西乡塘区",
						}
					]
				},
				{
					"name":"河池市",
					"arealist":[{
						"name":"大化县瑶族自治县"
					},
					{
						"name":"都安瑶族自治县"
					}]
				}
			]
		}
	]
}

window.onload = function() {
	// 填充初始数据
	// 获取json对象的province属性：返回的是一个数组对象
	// 获取页面加载时的初始省份信息  pros={'广东省','广西省'}
	var pros = data.province;
	// 获取页面加载时的初始城市信息	pros[0].citylist：{'天河区','白云区','海珠区'}
	var cities = pros[0].citylist;
	// 获取页面加载时的初始地区信息	pros[0].citylist[0].arealist：{'岗顶','体育西路','东圃'}
	var areas = cities[0].arealist;
	// 填充省份
	// 获取省份下拉框
	var province = document.getElementById('province');
	// 遍历省份数组，添加初始数据
	for (var i = 0; i < pros.length; i++) {
		// 创建option标签
		var option = document.createElement('option');
		// 设置option标签的文本内容
		option.innerText = pros[i].name;
		// 将option追加到select中
		province.appendChild(option);
	}
	// 填充城市
	// 获取城市下拉框
	var city = document.getElementById('city');
	// 遍历城市数组，添加数据
	for (var i = 0; i < cities.length; i++) {
		var option = document.createElement('option');
		option.innerText = cities[i].name;
		city.appendChild(option);
	}
	// 填充地区
	// 获取地区下拉框
	var area = document.getElementById('area');
	// 遍历地区数组，添加数据
	for (var i = 0; i < areas.length; i++) {
		var option = document.createElement('option');
		option.innerText = areas[i].name;
		area.appendChild(option);
	}
}

// 省份下拉框发生改变时的操作
function changeProvince() {
	// 获取省份下拉框
	var province = document.getElementById('province');
	// 获取选中省份的下标
	var index = province.selectedIndex;
	// 获取省份
	var pros = data.province[index];
	// 所选省份对应的城市
	var cities = pros.citylist;
	// 对应城市的地区
	var areas = cities[0].arealist;
	// 获取城市下拉框
	var city = document.getElementById('city');
	// 清除生词下拉框原先的数据
	// 获取原先的option数组
	var childs = city.childNodes;
	var length = childs.length;
	// 每次删除，数组的长度都是动态变化减少，所以需要定义一个变量用于接受数组原始长度，
	// 按照原始的长度来确定循环次数，因为循环删除，元素逐渐减少，所以每次删除的都是下标为0的元素
	for (var i = 0; i < length; i++) {
		// 删除的都是第一个元素，直至没有
		city.removeChild(childs[0]);
	}
	// 填充对应的城市
	for (var i = 0; i < cities.length; i++) {
		var option = document.createElement('option');
		option.innerText = cities[i].name;
		city.appendChild(option);
	}
	// 与城市的操作一样
	var area = document.getElementById('area');
	// 获取地区的子节点数组（option）
	var childNodes = area.childNodes;
	// 子节点数组的长度
	var cength = childNodes.length;
	// 遍历childNodes，循环删除
	for (var i = 0; i < cength; i++) {
		area.removeChild(childNodes[0]);
	}
	for (var i = 0; i < areas.length; i++) {
		var option = document.createElement('option');
		option.innerText = areas[i].name;
		area.appendChild(option);
	}
}
// 城市下拉框发生改变时的操作
function changeCity() {
	// 获取选中省份的下标
	var pindex = document.getElementById('province').selectedIndex;
	// 获取选中城市的下标
	var cindex = document.getElementById('city').selectedIndex;
	// 获取地区数组
	var areas = data.province[pindex].citylist[cindex].arealist;
	// 获取地区下拉框
	var area = document.getElementById('area');
	// 获取原先的option数组
	var childs = area.childNodes;
	var length = childs.length;
	// 删除原先的option元素
	for (var i = 0; i < length; i++) {
		area.removeChild(childs[0]);
	}
	// 向area填充新的内容
	for (var i = 0; i < areas.length; i++) {
		var option = document.createElement('option');
		option.innerText = areas[i].name;
		area.appendChild(option);
	}
}

案例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/国家级联动.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select id="country" onclick="changeCountry()">
			
		</select>
		<select id="province" onclick="changeProvince()">
			
		</select>
		<select id="city">
			
		</select>
		
	</body>
</html>

var data = {
	"country":[{
		"name":"China",
		"provincelist":[{
			"name":"北京市",
			"citylist":[{
				"name":"朝阳区"
			},
			{
				"name":"东城区"
			},
			{
				"name":"西城区"
			}]
		},{
			"name":"广东省",
			"citylist":[{
				"name":"广州市"
			},{
				"name":"珠海市"
			},{
				"name":"深圳市"
			},{
				"name":"江门市"
			}]
		},{
			"name":"广西省",
			"citylist":[{
				"name":"南宁市"
			},{
				"name":"河池市"
			},{
				"name":"玉林市"
			},{
				"name":"桂林市"
			}]
		}
		]
	},{
		"name":"U.S.A",
		"provincelist":[{
			"name":"加利福尼亚州",
			"citylist":[{
				"name":"洛杉矶"
			},{
				"name":"好莱坞"
			},{
				"name":"阿凯迪亚"
			},{
				"name":"蒙特利公园"
			}]
		},{
			"name":"佛罗里达州",
			"citylist":[{
				"name":"杰克逊维尔"
			},{
				"name":"迈阿密"
			},{
				"name":"坦帕市"
			}]
		},{
			"name":"夏威夷州",
			"citylist":[{
				"name":"夏威夷县"
			},{
				"name":"檀香山县"
			},{
				"name":"卡拉沃县"
			}]
		}]
	}]
}

window.onload = function() {
	var countries = data.country;
	var country = document.getElementById('country');
	for(var i = 0;i<countries.length;i++) {
		// 创建option标签
		var option = document.createElement('option');
		option.innerText = countries[i].name;
		country.appendChild(option);
	}
	var pros = countries[0].provincelist;
	var province = document.getElementById('province');
	for(var i = 0;i<pros.length;i++) {
		// 创建option标签
		var option = document.createElement('option');
		option.innerText = pros[i].name;
		province.appendChild(option);
	}
	var cities = countries[0].provincelist[0].citylist;
	var city = document.getElementById('city');
	for(var i = 0;i<cities.length;i++) {
		// 创建option标签
		var option = document.createElement('option');
		option.innerText = cities[i].name;
		city.appendChild(option);
	}
}

function changeCountry() {
	var country = document.getElementById('country');
	var index = country.selectedIndex;
	var countries = data.country[index];
	var provinces =countries.provincelist; 
	var cities = provinces[0].citylist;
	var province = document.getElementById('province');
	var childs =province.childNodes; 
	var length = childs.length;
	for(var i =0;i<length;i++) {
		province.removeChild(childs[0]);
	}
	for(var i = 0;i<provinces.length;i++) {
		var option = document.createElement('option');
		option.innerText = provinces[i].name;
		province.appendChild(option);
	}
	var city = document.getElementById('city');
	var childNodes = city.childNodes;
	var clength = childNodes.length;
	for(var i =0;i<clength;i++) {
		city.removeChild(childNodes[0]);
	}
	for(var i = 0;i<cities.length;i++) {
		var option = document.createElement('option');
		option.innerText = cities[i].name;
		city.appendChild(option);
	}
}

function changeProvince() {
	var cindex = document.getElementById('country').selectedIndex;
	var pindex = document.getElementById('province').selectedIndex;
	var cities = data.country[cindex].provincelist[pindex].citylist;
	var city = document.getElementById('city');
	var childs = city.childNodes;
	var length = childs.length;
	for(var i =0;i<length;i++) {
		city.removeChild(childs[0]);
	}
	for(var i=0;i<cities.length;i++) {
		var option = document.createElement('option');
		option.innerText = cities[i].name;
		city.appendChild(option);
	}
}