JavaScript로 드롭다운 값을 얻는 방법

웹 양식을 작성하는 방법을 배울 때 가장 일반적인 작업 중 하나는 드롭다운에서 값을 가져오는 것입니다. 이 기사에서는 JavaScript로 이러한 값을 얻는 방법을 배웁니다.

드롭다운 HTML 요소

HTML을 사용하여 드롭다운 요소를 작성하는 방법에 대해 간략히 살펴보겠습니다. 길을 잃으면 내 Codepen을 따르십시오.

드롭다운 요소를 빌드하려면 select를 사용해야 합니다. 태그를 지정하고 option 사용 그 밑에 둥지를 튼 아이들. 선택 요소는 드롭다운을 생성하고 옵션 태그를 사용하여 드롭다운에 포함될 옵션을 정의합니다.

이모티콘이 있는 좋아하는 과일 드롭다운을 만들어 보겠습니다.

<select name="fruits" id="fruits">
  <option value="">--select--</option>
  <option value="avocado">Avocado🥑</option>
  <option value="watermelon">Watermelon🍉</option>
  <option value="kiwi">Kiwi🥝</option>
  <option value="tomato">Tomato🍅</option>
</select>
<h2 id="pick"></h2>

나중에 JavaScript로 채울 빈 h2를 추가했습니다. 이 시점에서 좋아하는 과일을 선택할 수 있습니다.

가치 속성의 중요성을 확인하세요. . 이 속성은 JavaScript로 쉽게 재생할 수 있는 양식화되지 않은 데이터를 제공합니다. 반면에 옵션 태그 안의 텍스트는 거의 무엇이든 될 수 있으므로 신뢰할 수 없습니다. 여기서 중요한 것은 가치 속성입니다.

자바스크립트로 드롭다운 값 선택 및 표시

우선 getElementById를 사용하여 과일 드롭다운을 선택해야 합니다. 선택 태그에.

const element = document.getElementById("fruits");

이제 드롭다운이 선택되었으므로 현재 선택한 옵션의 값을 가져올 수 있습니다. 이것은 기본적으로 첫 번째 옵션입니다. 시도해 봅시다:

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

여기에서 요소 옵션 배열 속성에 액세스하고 있습니다. 그런 다음 현재 선택한 옵션의 인덱스를 선택하고 해당 값이나 텍스트에 액세스합니다.

이제 두 변수를 모두 console.log에 기록해 보십시오. 무슨 일이야? 아무것도. 왜요? 첫 번째 요소에 빈 값이 있기 때문입니다(단지 자리 표시자일 뿐입니다). 첫 번째 옵션을 주석 처리하고 다시 시도하십시오. 야! 자바스크립트로 값과 텍스트를 모두 얻습니다.

자바스크립트로 드롭다운 변경사항 수신

JavaScript는 페이지의 변경 사항에 반응하도록 설계되었으므로 드롭다운을 동적으로 만들어야 합니다. 이를 염두에 두고 eventListener를 할당합니다. 우리의 과일 요소에.

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `Value Selected: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

eventListener로 우리는 드롭다운의 변경 사항을 듣고 있습니다. e.target.value를 수행하여 선택한 옵션의 값을 얻을 수도 있습니다. , 이것은 양식에 대한 다른 튜토리얼에서 본 적이 있을 것입니다.

도착했습니다. 이제 과일 옵션을 선택할 수 있으며 JavaScript는 드롭다운의 변경 사항에 반응하고 그에 따라 h2를 업데이트합니다. 매우 유익합니다!

결론

드롭다운 값을 얻는 것은 웹 개발을 배울 때 중요한 기술입니다. 데이터베이스를 업데이트하거나 사용자에게 선택 항목을 표시하거나 DOM 변경에 '반응'하려는 경우 얻은 값이 중요합니다. JavaScript를 사용하면 이러한 값을 즉시 얻을 수 있습니다.