index.pug
4.96 KB
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
doctype html
html
head
title= title
link(rel='stylesheet', href='stylesheets/style.css')
script(type='text/javascript').
function addressKindChange(e) {
var xhr = new XMLHttpRequest();
var HttpUrl = "http://openapi.nsdi.go.kr/nsdi/eios/service/rest/AdmService/admDongList.json"; /*URL*/
var parameter = '?' + encodeURIComponent("authkey") +"="+encodeURIComponent("7ded580bb63772d9041202"); /*authkey Key*/
parameter += "&" + encodeURIComponent("admCode") + "=" + encodeURIComponent(`${e.value}`); /* 시도/시군구 코드(5자리) */
xhr.open('GET', HttpUrl + parameter);
console.log(xhr);
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
var result = JSON.parse(this.responseText);
var dong_name = [];
var dong_code = [];
for(var i=0; i<result["admVOList"]["admVOList"].length; i++){
dong_name.push(result["admVOList"]["admVOList"][i].lowestAdmCodeNm);
dong_code.push(result["admVOList"]["admVOList"][i].admCode);
}
console.log(dong_code);
var target = document.getElementById("dong");
target.options.length = 0;
for (x in dong_name) {
var opt = document.createElement("option");
opt.value = dong_code[x];
opt.innerHTML = dong_name[x];
target.appendChild(opt);
}
}
};
xhr.send();
}
body
block content
img.image(src='/logo.png')
form(action='/select' method='post' id='location')
<div class="form-group col-sm-5">
<label for="si">시</label>
<select class="form-control" id="si" name="si" onchange="addressKindChange(this)">
<option>시</option>
<option value="41820">가평군</option>
<option value="41280">고양시</option>
<option value="41281">고양시 덕양구</option>
<option value="41285">고양시 일산동구</option>
<option value="41287">고양시 일산서구</option>
<option value="41290">과천시</option>
<option value="41210">광명시</option>
<option value="41610">광주시</option>
<option value="41310">구리시</option>
<option value="41410">군포시</option>
<option value="41570">김포시</option>
<option value="41360">남양주시</option>
<option value="41250">동두천시</option>
<option value="41190">부천시</option>
<option value="41130">성남시</option>
<option value="41135">성남시 분당구</option>
<option value="41131">성남시 수정구</option>
<option value="41133">성남시 중원구</option>
<option value="41110">수원시</option>
<option value="41113">수원시 권선구</option>
<option value="41117">수원시 영통구</option>
<option value="41111">수원시 장안구</option>
<option value="41115">수원시 팔달구</option>
<option value="41390">시흥시</option>
<option value="41270">안산시</option>
<option value="41273">안산시 단원구</option>
<option value="41271">안산시 상록구</option>
<option value="41550">안성시</option>
<option value="41170">안양시</option>
<option value="41173">안양시 동안구</option>
<option value="41171">안양시 만안구</option>
<option value="41630">양주시</option>
<option value="41830">양평군</option>
<option value="41670">여주시</option>
<option value="41800">연천군</option>
<option value="41370">오산시</option>
<option value="41460">용인시</option>
<option value="41463">용인시 기흥구</option>
<option value="41465">용인시 수지구</option>
<option value="41461">용인시 처인구</option>
<option value="41430">의왕시</option>
<option value="41150">의정부시</option>
<option value="41500">이천시</option>
<option value="41480">파주시</option>
<option value="41220">평택시</option>
<option value="41650">포천시</option>
<option value="41450">하남시</option>
<option value="41590">화성시</option>
</select>
</div>
<div class="form-group col-sm-4">
<label for="dong">동</label>
<select class="form-control" id="dong" name="dong">
<option>선택해주세요.</option>
</select>
</div>
input(type ='submit')