코딩/Java Script

Javascript Select 태그에 Option 추가 방법 (appendChild 이용)

코딩왕 코주부 2022. 4. 9. 12:45
반응형

안녕하세요 코봉이입니다.

 

오늘은 appendChild 함수를 이용하여 HTML Select 태그에 Option을 추가하는 방법에 대해 기록하겠습니다.

 

오늘의 목표에 대해 간략히 설명드리겠습니다.

 

기존의 Select 태그에 "이름"(disable, selected)과 "코봉이" 라는 Option이 이미 있고 "추가" 버튼을 누르면, 클릭 이벤트 리스너를 통해 (addEventListener → click) 3명에 해당하는 Option이 추가되는 컨셉입니다.

 

먼저 HTML 파일은 아래와 같이 준비해주세요.

<!DOCTYPE html>
<html>
<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>
    <style>
        select, button {height: 30px;}
        button {background-color: skyblue;}
    </style>
</head>
<body>
    <select name="test" id="name">
        <option disabled selected>이름</option>
        <option value="코봉">코봉이</option>
    </select>
    <button id="add">추가</button>
    <script src="addOptionScript.js"></script>
</body>
</html>

JavaScript source 파일은 위에서 확인 가능하듯이 "addOptionScript.js" 파일을 사용하겠습니다.

 

파일 경로에 대해서는 설명 안드려도 알아서 하실 수 있으시죠?

 

아래처럼 getElementById, addEventListener, forEach, createElement, appendChild 함수를 사용하시면 원하는 바를 이룰 수 있습니다.

 

let selectTag = document.getElementById("name")
let btnAdd = document.getElementById("add")
let arrName = ['코크니', '백종원', '유병재']

btnAdd.addEventListener('click', function(){
    arrName.forEach(element => {
        let optionTag = document.createElement("option");
        optionTag.textContent = element;
        selectTag.appendChild(optionTag);
    });
})

스크립트는 위에 나와있는 것처럼 작성을 해주시구요..

 

저장한 다음에 확인해보겠습니다.

 

짜잔~~!!

 

쉽게 완료되었네요^^

 

이상 appendChild를 이용하여 Select Tag에 Option 요소를 추가하는 예제를 보여드렸습니다!

 

많은 도움 되셨으면 좋겠네요!

반응형