android省市区 简书,三级联动（省市区）

js数据：

代码

html>

console.log(arr);

var province = document.querySelector('#province')

var city = document.querySelector('#city')

var area = document.querySelector('#area')

function init() {

arr.forEach(function (item) {

province.innerHTML += `${item.name}`

})

arr[0].city.forEach(function (item) {

city.innerHTML += `${item.name}`

})

arr[0].city[0].districtAndCounty.forEach(function (item) {

area.innerHTML += `${item}`

})

}

init()

var currentProvince=null

province.onchange = function () {

// 清空 市

city.length = 0

area.length = 0

console.log(this.value);

var _this = this

currentProvince = arr.filter(function (item) {//函数 里面的函数  里面的this 一般不指向前者

return item.name == _this.value

})

console.log(currentProvince);

// 渲染市和区

currentProvince[0].city.forEach(function (item) {

city.innerHTML += `${item.name}`

})

currentProvince[0].city[0].districtAndCounty.forEach(function (item) {

area.innerHTML += `${item}`

})

}

city.onchange = function () {

// 每次改变市 清空区

area.length = 0

var _this = this

var currentCity = currentProvince[0].city.filter(function (item) {

return item.name == _this.value

})

console.log(currentCity);

currentCity[0].districtAndCounty.forEach(function (item) {

area.innerHTML += `${item}`

})

}