-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
112 lines (107 loc) · 3.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li>省：<select name="province" id="province"></select></li>
<li>市：<select name="city" id="city"></select></li>
<li>县：<select name="county" id="county"></select></li>
<li>镇：<select name="town" id="town"></select></li>
</ul>
<div id="resultText"></div>
<div id="resultCode"></div>
<script>
;(function () {
const info = {}
const state = {}
const year = 2023
const matchFields = {
1: 'province',
2: 'city',
3: 'county',
4: 'town',
5: 'village',
}
function request(url) {
return fetch(url).then((response) => response.json())
}
function getOption(data, level = 1) {
const name = matchFields[level]
info[name] = info[name] || {}
return data
.map((item) => {
info[name][item.code] = item.children
return `<option value="${item.code}">${item.name}</option>`
})
.join('')
}
function renderOption({ id, tpl, change = () => {} }) {
const elSelect = document.querySelector(`#${id}`)
if ((!tpl || !elSelect) && state[id]) {
delete state[id]
}
const list = Object.values(state)
document.querySelector('#resultText').innerText = list
.map((item) => item.text)
.join(' ')
document.querySelector('#resultCode').innerText = list
.map((item) => item.code)
.join(' ')
if (!elSelect) {
return
}
elSelect.innerHTML = tpl
elSelect.parentNode.style.display = tpl ? 'block' : 'none'
const funKey = `${id}EventHandler`
const elOption = elSelect.querySelector('option')
elOption && change(elOption.value, elOption.innerText)
if(!info[funKey]){
info[funKey] = function (e) {
const code = e.target.value
change(code, this.options[this.selectedIndex].innerText)
}
elSelect.addEventListener('change', info[funKey], false)
}
}
function renderTpl({ level = 1, maxLevel = 1, data = [] }) {
const name = matchFields[level]
renderOption({
id: name,
tpl: getOption(data, level),
change(code, text) {
state[name] = {
code,
text,
}
if (level > maxLevel) {
return
}
renderTpl({
level: level + 1,
maxLevel,
data: info[name][code],
})
},
})
}
request(`./data/${year}/tree.json`).then((data) => {
const Items = {}
Items[0] = data.map((item) => item.name)
data.forEach((item, index) => {
Items[`0_${index}`] = (item.children || []).map((cur, key) => {
Items[`0_${index}_${key}`] = (cur.children || []).map((item) => item.name)
return cur.name
})
})
console.log(Items)
renderTpl({ data, maxLevel: 4 })
})
})()
</script>
</body>
</html>