JavaScript를 사용하는 동적 HTML 선택 드롭다운 목록

이 JavaScript 자습서를 마치면 선택 태그를 사용하여 HTML 드롭다운 목록을 동적으로 만드는 방법을 알게 될 것입니다.

이를 시연하기 위해 아래 이미지와 같은 국기 선택기를 빌드해 보겠습니다.



Declare HTML Select Wrapper Element
Create JavaScript Object Model
Add Options Dynamically To Select Element
Attach Change Event To Select Drop Down List

HTML 선택 래퍼 요소 선언

먼저 내부에 옵션을 동적으로 추가하려는 countriesDropDown이라는 id를 가진 선택 태그를 만듭니다.

<select id="countriesDropDown">
</select>

그런 다음 JavaScript에서 DOM 참조를 정의하십시오.

const countriesDropDown = document.getElementById("countriesDropDown");

JavaScript 데이터 개체

다음은 countriesData라는 JavaScript 개체로 데이터 모델이며 국가 이름을 키로, 국기 아이콘을 값으로 사용하는 몇 가지 속성이 있습니다.

const countriesData = {
  "Australia": "",
  "Canada": "",
  "UK": "",
  "USA": ""
}

일반적으로 데이터베이스 또는 API와 같은 외부 소스에서 데이터를 가져오고 싶을 것입니다. 단순화를 위해 대신 JavaScript 객체를 사용합니다.

This method, often called data-driven approach, is super cool because you can add or delete items from the drop down list without touching the code.

요소를 선택하기 위해 동적으로 옵션 추가

다음으로 for..in 루프를 사용하여 countriesData 개체를 반복하고 각 속성(이 경우 국가 이름)의 키를 보유할 루프 헤더에 key라는 변수를 만듭니다.

for (let key in countriesData) {
  let option = document.createElement("option");
  option.setAttribute('value', data[key]);

  let optionText = document.createTextNode(key);
  option.appendChild(optionText);

  countriesDropDown.appendChild(option);
}

루프 내에서 옵션 요소를 만들고 옵션이라는 변수에 저장합니다.

그런 다음 옵션 요소에 값 특성을 설정하고 각 반복에서 countriesData 개체의 속성 값에 해당 값을 할당합니다.

I know its a lot of using the word “value” and I hope you are still following along…

다음으로 루프 헤더에 선언된 키 변수의 값을 optionText라는 변수에 할당합니다.

그런 다음 옵션 요소에 optionText를 추가합니다.

마지막으로 이 튜토리얼의 앞부분에서 선언한 countriesDropDown에 option 요소를 추가합니다.

앱을 실행하고 콘솔을 열면 모든 옵션이 선택 태그에 동적으로 추가되는 것을 볼 수 있습니다.



멋진!

드롭다운 목록 선택에 변경 이벤트 첨부

이제 옵션 요소의 value 속성에 추가된 플래그 아이콘을 클릭했을 때 브라우저에 표시하고 싶습니다.

그렇게 하려면 index.html 파일 내에 flag-icon이라는 ID로 div를 만듭니다.

<div id="flag-icon">
</div>

그런 다음 JavaScript에서 플래그 아이콘에 대한 DOM 참조를 만듭니다.

const flagIcon = document.getElementById("flag-icon");

이제 선택 드롭다운 목록에서 적절한 국가를 선택한 경우에만 국기 아이콘을 표시하고 싶습니다.

그렇게 하려면 선택 요소에 변경 이벤트를 첨부하십시오.

countriesDropDown.addEventListener("change", e => {
   flagIcon.innerHTML = e.target.value;
})

그런 다음 변경 이벤트의 콜백 화살표 함수에 전달된 이벤트 객체에서 값을 가져와 플래그의 innerHTML에 값을 설정합니다.

결론:

이제 데이터 기반 접근 방식을 사용하여 JavaScript에서 HTML 선택 드롭다운 목록을 동적으로 생성하는 방법을 배웠습니다. 이렇게 하면 코드를 건드리지 않고도 데이터 소스에 4개의 옵션 또는 400개의 옵션을 가질 수 있으며 그대로 작동합니다.

소스 코드here를 다운로드할 수 있습니다.

질문이 있으시면 아래 댓글 상자를 통해 저에게 메시지를 보내주십시오.

행복한 학습!