86 lines
1.9 KiB
HTML
86 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<select class="province" name="" id="">
|
|
</select>
|
|
|
|
<select class="city" name="" id="">
|
|
</select>
|
|
|
|
<select class="area" name="" id="2">
|
|
</select>
|
|
|
|
</body>
|
|
<script src="./city.js"></script>
|
|
<script>
|
|
var body = document.querySelector("body");
|
|
var province = document.querySelector(".province");
|
|
var City = document.querySelector(".city");
|
|
var Area = document.querySelector(".area");
|
|
|
|
function RenderProvince() {
|
|
options.forEach((val, index) => {
|
|
// console.log(val);
|
|
province.innerHTML += `<option value="${val.code}">${val.label}</option>`
|
|
});
|
|
|
|
province.onchange = function () {
|
|
RenderCity(options[this.selectedIndex].children)
|
|
}
|
|
|
|
}
|
|
|
|
function RenderCity(data) {
|
|
City.innerHTML = ""
|
|
data.forEach((val, index) => {
|
|
City.innerHTML += `<option value="${val.code}">${val.label}</option>`
|
|
})
|
|
|
|
if(data[0].hasOwnProperty("children")) {
|
|
// console.log(data[0].children);
|
|
Area.className = "area"
|
|
RenderArea(data[0].children)
|
|
} else {
|
|
Area.className = "area hidden"
|
|
}
|
|
|
|
City.onchange = function () {
|
|
RenderArea(data[this.selectedIndex].children)
|
|
}
|
|
}
|
|
|
|
function RenderArea(data) {
|
|
Area.innerHTML=""
|
|
data.forEach((val, index) => {
|
|
Area.innerHTML += `<option value="${val.code}">${val.label}</option>`
|
|
});
|
|
}
|
|
|
|
|
|
RenderProvince()
|
|
|
|
// RenderCity(options[0].children)
|
|
|
|
|
|
</script>
|
|
|
|
</html> |