地址管理(省市区)
想必大家都碰到过写地址管理的一些东西,在这就教大家一个方法,纯原生写省市区三级联动,切记必须要有省市区的json文件,或者js数据,或者后台数据库!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./area.js"></script>
</head>
<body>
<select id="province">
<option value="1">请选择省份</option>
</select>
<select id="city">
<option value="1">请选择市区</option>
</select>
<select id="region">
<option value="1">请选择区县</option>
</select>
<script>
var province = document.querySelector('#province');
var city = document.querySelector('#city');
var region = document.querySelector('#region');
var pro_str = '<option value="1">请选择省份</option>'
for (var i in area) {
// console.log(i)
// console.log(area[i]);
pro_str += '<option value="' + i + '">' + area[i].name + '</option>'
}
province.innerHTML = pro_str
function getCity() {
var city_str = '<option value="1">请选择市区</option>';
if (province.value == 1) {
city.value = 1
} else {
var obj = area[province.value].child
for (var i in obj) {
city_str += '<option value="' + i + '">' + obj[i].name + '</option>'
}
city.innerHTML = city_str;
}
getRegion()
}
function getRegion() {
var region_str = '<option value="1">请选择区县</option>';
if (city.value == 1) {
region.value = 1;
} else {
var obj = area[province.value].child[city.value].child
for (var i in obj) {
region_str += '<option value="' + i + '">' + obj[i] + '</option>'
}
region.innerHTML = region_str
}
}
getCity();
province.onchange = function() {
getCity();
}
city.onchange = function() {
getRegion();
}
</script>
</body>
</html>
源码奉上,欢迎来探讨!