[JavaScript] select box에 동적으로 option을 추가해보자
오늘은 팀 프로젝트를 하면서 약간의 삽질을 하면서 알게된 select box에 option을 추가하는 방법을 포스팅하겠습니다.
<select class="main-city">
<option>서울</option>
<option>부산</option>
<option>제주</option>
<option>경기</option>
<option>인천</option>
<option>강원</option>
<option>경상</option>
<option>전라</option>
<option>충청</option>
</select>
<select class="sub-city">
</select>왼쪽 select box의 값에 매칭되는 오른쪽 select box의 옵션을 동적으로 바꿔야 합니다.
제가 처음에 생각했던 방향은 다음과 같습니다.
1. querySelect를 이용해 main-city 객체를 변수에 담는다.
2. querySelect를 이용해 sub-city 객체를 변수에 담는다.
3. main-city 객체가 담긴 변수에 change 이벤트가 감지되었을 때 선택된 option을 뽑아온다.
4. switch문을 사용해 서울 ~ 충청일 경우를 나누어 각각에 맞는 모든 옵션을 엘리먼트 태그로 만든다.
5. sub-city 객체가 담긴 변수의 자식 엘리먼트들을 remove 함수를 통해 비우고 append를 통해 4번의 옵션들을 넣는다.
4번까지는 잘 진행이 되었지만, 5번에서 remove 함수를 사용하는데 문제점이 있었습니다.
'서울'을 선택했을 때 오른쪽 select box의 option은 총 15개가 있습니다.
그래서 for으로 15번을 순회하면서 15번을 지우려고 했는데 7개만 지워지는 문제가 발생했습니다.
remove를 다루는 문장을 주석처리하고 console.log를 통해 확인을 하면 for문이 15번 돌았지만, remove를 실행만 하면 for문이 7번밖에 돌지 않았습니다. 😅
우여곡절 끝에 W3Schools와 MDN 등에서 options.length 함수를 알게되었습니다.
option.length = 0 으로 설정하면 굳이 remove를 하지 않아도 알아서 비워진다는 것을 알게 되었습니다.
동적으로 select box에 option을 추가하는 방법은 다음과 같습니다.
var mainCity = document.querySelector('.main-city');
mainCity.onchange = function () {
var subCity = document.querySelector('.sub-city');
var mainOption = mainCity.options[mainCity.selectedIndex].innerText;
// var mainOption = mainCity.options[mainCity.selectedIndex].value;로 해도 동일합니다.
}1. 왼쪽 select box 객체를 가져오고 이것에 변화가 생겼을 때 이벤트가 실행될 수 있는 onchange 이벤트를 걸어줍니다.
var subOptions = {
seoul: ['강남/역삼/삼성', '신사/청담/압구정', '서초/교대/사당', '잠실/송파/강동',
'을지로/명동/중구', '서울역/이태원/용산', '종로/인사동', '동대문구', '홍대/합정/마포/서대문',
'여의도', '영등포역', '구로/신도림/금천', '김포공항/염창/강서', '건대입구/성수/왕십리', '성북/강북/노원/도봉'],
busan: ['해운대/마린시티', '벡스코/센텀시티', '송정/기장', '광안리/경성대', '부산역',
'자갈치/남포동/영도', '송도/다대포', '서면/연산/범일', '동래/온천,금정구', '사상/강서/김해공항'],
jeju: ['제주시/제주국제공항', '서귀포시', '애월/한림/협재', '중문', '표선/성산', '함덕/김녕/세화'],
gyeonggi: ['가평/청평/양평', '수원/화성', '고양/파주/김포', '의정부/포천/동두천', '용인/동탄', '오산/평택',
'남양주/구리/성남/분당', '이천/광주/여주/하남', '부천/광명/시흥/안산', '안양/의왕/군포'],
incheon: ['송도/소래포구', '인천국제공항/강화/을왕리/영종', '구읍뱃터/월미도', '주안/간석/인천시청', '청라/계양/부평'],
gangwon: ['속초/양양/고성', '춘천/인제/철원', '강릉', '평창/정선/영월', '동해/삼척/태백', '홍천/횡성/원주'],
gyeongsang: ['대구/구미/안동/문경', '경주', '울산/양산', '거제/통영', '포항/영덕/울진/청송', '창원/마산/진해/김해', '남해/사천/하동/진주'],
jeonla: ['전주', '광주/나주', '여수', '순천/광양/구례/목포/보성', '남원/무주/완주/익산', '군산/부안/고창'],
chungcheong: ['대전/세종', '천안/아산/도고', '안면도/태안/서산/덕산', '보령/대천/부여/공주/금산', '청주/음성/진천', '충주/제천/단양']
}
switch (mainOption) {
case '서울':
var subOption = subOptions.seoul;
break;
case '부산':
var subOption = subOptions.busan;
break;
case '제주':
var subOption = subOptions.jeju;
break;
case '경기':
var subOption = subOptions.gyeonggi;
break;
case '인천':
var subOption = subOptions.incheon;
break;
case '강원':
var subOption = subOptions.gangwon;
break;
case '경상':
var subOption = subOptions.gyeongsang;
break;
case '전라':
var subOption = subOptions.jeonla;
break;
case '충청':
var subOption = subOptions.chungcheong;
break;
}2. subOptions 객체를 하나 생성하여 option에 들어갈 값들을 모두 넣습니다. 그리고 switch문을 사용하여 걸러줍니다.
subCity.options.length = 0;
for (var i = 0; i < subOption.length; i++) {
var option = document.createElement('option');
option.innerText = subOption[i];
//option.value = subOption[i]; 이것도 가능합니다.
subCity.append(option);
}3. '서울' option에서 '부산' option을 선택했다면 서울과 관련된 option들이 사라지고 부산과 관련된 option들로 바뀌어야 하므로 options.length = 0; 방법을 통해 비워줍니다.
4. 이후, subOption의 길이만큼 for문을 순회하면서 option 엘리먼트를 만들어 값을 넣어준 후 subCity에 append를 해줍니다.
이렇게 동적으로 option이 잘 추가되는 것을 확인하실 수 있습니다.