省市区三级联动（纯原生js）"/>
省市区三级联动（纯原生js）
地址管理（省市区）
想必大家都碰到过写地址管理的一些东西，在这就教大家一个方法，纯原生写省市区三级联动，切记必须要有省市区的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_strfunction getCity() {var city_str = '<option value="1">请选择市区</option>';if (province.value == 1) {city.value = 1} else {var obj = area[province.value].childfor (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].childfor (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>
源码奉上，欢迎来探讨！
更多推荐
省市区三级联动（纯原生js）
发布评论