반응형
2020-01-07 수업내용 정리
실습예제)
전국 시도중 하나를 선택하면
선택한 시도에 대한 시군구가 다음 select에 목록으로 출력되고
시군구 중 하나를 선택하면 선택한 시군구에 대한 읍면동이
다음 select에 목록으로 출력되도록함 .
포인트1 : 이벤트발생시 option 태그가 동적으로 생성
포인트2 : select에서 발생가능한 이벤트는 change임
포인트3 : select에서 선택한 항목의 정보는 selectedIndex속성을 이용
포인트4 : option 태그에 텍스트를 추가하려면 createNode를 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<H2>주소검색</H2>
<div>
<select id="sido">
<option>-시도-</option>
<option>-서울특별시-</option>
<option>-경기도-</option>
<option>-인천광역시-</option>
<option>-부산광역시-</option>
</select>
<select id="gugun">
<option>-시/군/구-</option>
</select>
<select id="dong">
<option>-읍/면/동-</option>
</select>
</div>
<p id="addr"></p>
</body>
</html> let sd = ['', '서울특별시', '경기도', '인천광역시', '부산광역시'];
let sgg = [['-시/군/구-'],
['-시/군/구-','강남구','서초구','송파구'],
['-시/군/구-','광명시','구리시','성남시','수원시','고양시'],
['-시/군/구-', '연수구', '남동구'],
['-시/군/구-', '동래구', '해운대구','기장군']];
let ymd= [[ ['- 읍/면/동 -'] ],
[['- 읍/면/동 -'],
[['- 읍/면/동 -'], ['논현동'],['대치동'],['삼성동'] ],
[['- 읍/면/동 -'], ['반포동'], ['방배동'], ['양재동'] ],
[ ['가락동', '석촌동', '잠실동'] ] ],
[['- 읍/면/동 -'],
['1'],
['2'],
['3'],
['4'],
['5'] ],
[['- 읍/면/동 -'],
['a'],
['b'],
['c']],
[['- 읍/면/동 -'],
['가'],
['나'],
['다'] ]
]
// 변수선언
let sido = document.getElementById('sido')
let gugun = document.getElementById('gugun')
let dong = document.getElementById('dong');
sido.addEventListener('change', makegu)
function makegu(){
// 현재 선택한 시도의 index값을 알아냄
let sidx = sido.selectedIndex;
// 이미 등록된 목록은 제거
// ex 서울시를 고르면 서울시에 해당하는 구군이 나오고
// 또다른시를 고르면 그시에맞는 구가나올텐데 서울시의 구또한 같이 나오게된다.
// 이를 방지하기위해 또다른시를 고른다면 while문을 추가해 전에 있던 시의 구/군을 제거해줘야한다.
while(gugun.lastChild){ // 구군목록에 option태그가 있는가 ?
gugun.removeChild(gugun.lastChild);
}
// 선택한 시도에 대한 구군목록을 배열에서 가져와서
// 구군select에 목록option으로 추가함
// <select><option>강남구</option></select>
// ex 위의 배열들을 변수 초기화할때 맞춰서 초기화해놨다.
// 시/도 의 서울시의 배열위치가 1이라면 구/군의 서울시에 해당하는 구/군의 배열도 1이 되게
for (let gg of sgg[sidx]){
let opt = document.createElement('option');
let txt = document.createTextNode(gg);
opt.appendChild(txt)
gugun.appendChild(opt);
}
}
// 두번째 SELECT 요소에 이벤트핸들러 등록
// 첫번째 항목에서 선택한 항목값과
// 두번째 항목에서 선택한 값을 이용해서 읍면동 출력
//포인트 0 : 핸들러명 - makedong
//포인트 1 : 변수명 of 배열명[시도][구군]
gugun.addEventListener('change', makedong);
function makedong() {
let sidx = sido.selectedIndex;
let gidx = gugun.selectedIndex;
while(dong.lastChild) {
dong.removeChild(dong.lastChild)
}
for ( let dg of ymd[sidx][gidx]){
let opt = document.createElement('option')
let txt = document.createTextNode(dg)
opt.appendChild(txt);
dong.appendChild(opt);
}
}
// 세번째 select 요소에 이벤트핸들러 등록
// 선택한 주소 ( 시도/구군/읍면동 ) 를 p요소를 이용해서 출력
dong.addEventListener('change', showaddr);
let addr = document.getElementById('addr')
function showaddr() {
let ymdong = ' ';
if (dong.value != '-/읍/면/동-' ) ymdong = dong.value;
let result = sido.value + ' ' + gugun.value + ' ' + dong.value;
addr.innerHTML='당신이 선택한 주소는 <b>' + result +'</b>';
}
반응형
'JAVA & APP :국비지원 학원 복습 > ' 카테고리의 다른 글
| JavaScript : 10 BOM-location, navigator (2/2) (0) | 2021.01.08 |
|---|---|
| JavaScript : 10 BOM-window,screen (1/2) (0) | 2021.01.08 |
| JavaScript : 09 DOM - 문서객체모델, 이미지조작, 동적테이블생성 (1/2) (0) | 2021.01.08 |
| JavaScript : 08 이벤트 (0) | 2021.01.07 |
| JavaScript : 07 내장객체 - 정규표현식 (2/2) (0) | 2021.01.07 |