[JS] HTML의 option 태그를 동적으로 생성하기

코드

typeOption.js

export const typeOptions = {
    '아우터': ['후드 집업', '블루종/MA-1', '레더/라이더스 자켓', '무스탕/퍼', '트러커 재킷', '슈트/블레이저 재킷', '가디건', '아노락 재킷', 
        '플리스/뽀글이', '트레이닝 재킷', '스타디움 재킷', '환절기 코트', '겨울 싱글 코트', '겨울 더블 코트', '겨울 기타 코트', 
        '롱패딩/롱헤비 아우터', '숏패딩/숏헤비 아우터', '패딩 베스트', '베스트', '사파리/헌팅 재킷', '나일론/코치 재킷', '기타 아우터'],
    '상의': ['반팔T', '셔츠/블라우스', '스포츠 상의', '니트/스웨터', '피케/카라T', '민소매T', '긴팔T', '맨투맨', '후드티', '기타'],
    '바지': ['반바지', '데님팬츠', '트레이닝/조거팬츠', '슬랙스/슈트팬츠', '점프슈트', '레깅스', '코튼팬츠', '스포츠 하의', '기타'],
    '신발': ['신발', '샌들', '기타'],
    '모자': ['캡/야구모자', '버킷/사파리햇', '기타'],
    '악세서리': ['목걸이', '귀걸이', '반지', '팔찌', '시계', '벨트', '선글라스', '안경', '기타'],
};

 

script.js

import { typeOptions } from './typeOptions.js';

// typeOptions의 key를 가져온다.
function populateTypeOptions() {
    const typeSelect = document.getElementById('type');
    
    Object.keys(typeOptions).forEach(type => {
        const option = document.createElement('option');
        option.value = type;
        option.textContent = type;
        typeSelect.appendChild(option);
    });
}

 

설명

const typeSelect = document.getElementById('type');

document는 현재 웹페이지의 HTML 문서이다. 문서 내에서 id 속성이 'type'인 요소들을 찾는다. 이 예제에서 선택된 요소들은 select 태그이다.

 

    Object.keys(typeOptions).forEach(type => {
    });

typeOptions 객체의 키 값들을 배열로 가져온다. foreach를 통해 키 값들을 순회한다.

 

const option = document.createElement('option');

option 태그를 생성한다.

 

option.value = type;
option.textContent = type;

option 태그의 value 및 textContent 속성을 현재 키 값으로 설정한다.

 

typeSelect.appendChild(option);

이전에 찾은 select 태그 요소에 생성된 option 태그를 자식 노드로 추가한다.

---

이 방법을 통해 HTML 코드를 간소화할 수 있다.

<!-- 변경 전 -->
<!-- 실제로 이렇게 코드 자체가 변경된다는 것은 아닙니다. -->
<select id="type" name="type" required>
    <option value="">선택하세요</option>
    <option value="아우터">아우터</option>
    <option value="상의">상의</option>
    <option value="바지">바지</option>
    <option value="신발">신발</option>
    <option value="모자">모자</option>
    <option value="악세서리">악세서리</option>
</select>

<!-- 변경 후 -->
<select id="type" name="type" required>
	<option value="">선택하세요</option>
</select>