Javascript Dom Browser Client Side

JavaScript에서 드롭다운 상자의 텍스트 가져오기

인터랙티브 웹 애플리케이션을 구축할 때 드롭다운 메뉴(선택 상자라고도 함)에서 정보를 추출해야 할 경우가 있습니다. 선택된 옵션의 값을 얻는 것은 비교적 간단하지만, 표시된 텍스트를 얻으려고 할 때 어려움이 발생할 수 있습니다. 이 블로그 포스트에서는 이 과정을 단계별로 안내하여 명확하고 이해하기 쉽게 설명하겠습니다.

문제: 표시된 텍스트 검색

HTML에 드롭다운 메뉴가 있는 상황을 고려해 보겠습니다. 다음 JavaScript를 사용하여 선택된 옵션의 값을 쉽게 얻을 수 있습니다:

document.getElementById('newSkill').value

그러나 선택된 옵션과 연관된 표시된 텍스트를 얻으려고 하면 어려움을 겪을 수 있습니다. 예를 들어, 드롭다운에 기술이 옵션으로 포함되어 있다면 선택된 기술의 이름을 어떻게 가져올까요? 참고를 위한 HTML 구조는 다음과 같습니다:

<select name="newSkill" id="newSkill">
    <option value="1">A skill</option>
    <option value="2">Another skill</option>
    <option value="3">Yet another skill</option>
</select>

해결책: 표시된 텍스트 접근하기

드롭다운 메뉴에서 현재 선택된 옵션의 표시된 텍스트를 검색하려면 몇 가지 JavaScript 속성을 사용할 수 있습니다. 다음 단계에 따라 효과적으로 수행하세요:

단계별 코드 구현

  1. 선택 요소 가져오기: 우선, document.getElementById()를 사용하여 드롭다운 메뉴에 대한 참조를 가져옵니다.

    var skillsSelect = document.getElementById("newSkill");

  2. 선택된 인덱스 결정: selectedIndex 속성을 사용하여 현재 선택된 옵션이 무엇인지 확인할 수 있습니다.

    var selectedIndex = skillsSelect.selectedIndex;

  3. 선택된 옵션의 텍스트 가져오기: 이제 selectedIndex를 사용하여 options 배열에 접근하고 선택된 옵션의 text 속성 값을 읽습니다.

    var selectedText = skillsSelect.options[selectedIndex].text;

전체 예제

다음은 위에서 설명한 과정의 전체 구현입니다:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);  // 선택된 옵션의 표시된 텍스트 출력

코드 설명

  • document.getElementById("newSkill"): 이 함수 호출은 ID로 HTML <select> 요소를 검색합니다.

  • skillsSelect.selectedIndex: 이는 선택 상자 내에서 현재 선택된 옵션의 인덱스 번호를 제공합니다.

  • skillsSelect.options[selectedIndex].text: 인덱스를 사용하여 해당하는 옵션에 접근하고 사용자에게 표시되는 텍스트 값을 검색합니다.

결론

드롭다운 메뉴에서 표시된 텍스트를 추출하는 것은 웹 애플리케이션의 상호 작용성을 향상시킬 수 있습니다. DOM을 탐색하고 HTML 요소의 속성에 접근하는 방법을 이해함으로써 더 매력적이고 반응적인 사용자 경험을 구축할 수 있는 능력을 갖추게 됩니다. 이제 드롭다운 상자에서 선택된 옵션 텍스트를 쉽게 가져올 수 있는 지식을 갖추게 되었습니다!

이 기술을 자신의 프로젝트에서 연습하는 것을 잊지 마세요. 그러면 JavaScript 기술이 계속 성장하는 것을 지켜볼 수 있습니다!