JavaScript의 드롭다운 목록에서 선택한 옵션의 값 가져오기

창립일자: October-18, 2021

JavaScript에서 마우스 클릭이나 키보드 키 누르기와 같은 사용자 상호 작용을 추적하거나 작업하는 것은 어렵습니다. JavaScript 이벤트 덕분에 웹 페이지의 사용자가 일부 변경을 수행한 후 사용자의 상호 작용을 추적하고 업데이트된 값을 더 쉽게 얻을 수 있습니다.

예를 들어, 드롭다운 메뉴가 있고 다른 모든 선택 사항 목록에서 옵션을 선택해야 하는 경우 다음과 같이 됩니다. 드롭다운에서 선택한 옵션의 값을 쉽게 얻을 수 있습니다. 마우스 click 이벤트의 도움으로 목록을 표시합니다.

이 기사를 읽으면서 이를 구현하는 방법을 자세히 알게 될 것입니다.

JavaScript에서 마우스 이벤트를 사용하여 목록에서 선택한 옵션 가져오기

JavaScript의 이벤트는 마우스 클릭이나 키보드 클릭 이벤트와 같은 웹 페이지에서 사용자의 상호 작용을 추적하는 좋은 방법입니다. JavaScript에서 사용할 수 있는 다양한 이벤트가 있으며 전체 목록은 여기에서 찾을 수 있습니다. 이 모든 이벤트 중에서 우리는 마우스 click 이벤트에 대해서만 논의할 것입니다.

사용자가 드롭다운 목록에 있는 옵션을 클릭할 때마다 마우스 click 이벤트가 트리거됩니다. 이 기능을 사용하면 드롭다운에서 선택한 옵션의 값을 쉽게 얻을 수 있습니다.

이제 실행 중에 어떻게 작동하는지 봅시다.

<!DOCTYPE html>
<html lang="en">

<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>

</head>

<body>

  <select id="list">
    <option class="drop-down">test1</option>
    <option class="drop-down" selected="selected">test2</option>
    <option class="drop-down">test3</option>
  </select>
  

  <script src="./script.js"></script>
</body>

</html>

다음은 자바스크립트 코드입니다.

function myFunction() {
    let elem = document.querySelectorAll(".drop-down");

    elem.forEach(element=>{
        element.addEventListener("click", e =>{
            console.log(e.target.innerHTML);
        });
    })
}

myFunction();

출력:

test2
test3
test1

출력은 드롭다운에서 사용자가 선택한 옵션에 따라 달라집니다.

HTML 내부에는 id가 list인 select 태그가 있으며 이 태그는 드롭다운 목록을 만드는 데 사용됩니다. 이 경우 select 태그 안에 세 가지 옵션이 있으며 각각 drop-down이라는 클래스 이름을 가집니다. 그리고 마지막에는 별도의 파일에 존재하기 때문에 body 태그 끝에 JavaScript 코드를 연결합니다.

JavaScript 내부에는 myFunction()이라는 함수가 있습니다. 여기에서 먼저 querySelectorAll 속성을 사용하여 drop-down 클래스 이름을 사용하여 드롭다운 목록의 모든 옵션 요소를 가져옵니다. 이 프로세스는 드롭다운 목록의 모든 옵션이 포함된 배열을 반환합니다. 그런 다음 이 배열을 elem이라는 변수에 저장합니다.

이제 elem 변수에 모든 옵션이 저장되었으므로 해당 변수에 for each 루프를 사용할 것입니다. for each 루프는 배열의 개별 요소를 가져오는 데 도움이 되므로 이제 배열의 이러한 각 옵션 요소에 이벤트 리스너를 추가할 수 있습니다.

어레이 내부의 개별 요소는 for each 루프에 인수로 전달된 변수 element를 사용하여 액세스할 수 있습니다. element에 이벤트를 추가하려면 두 개의 인수를 사용하는 addEventListener()라는 JavaScript에서 제공하는 메서드를 사용해야 합니다.

첫 번째 인수는 click 이벤트이고 두 번째 인수는 callback 함수입니다. click 이벤트는 사용자가 드롭다운의 옵션 중 하나를 클릭(마우스 왼쪽 버튼)할 때만 callback 기능을 실행하도록 브라우저에 지시합니다. callback 함수 자체는 e 또는 사용자가 선택한 요소를 가져오는 데 도움이 되는 이벤트라는 인수를 사용합니다.

콜백 기능에서 원하는 코드를 작성할 수 있습니다. 이 경우 선택한 옵션의 값을 얻으려고 하므로 e.target을 사용합니다. 이 명령은 현재 선택되고 있는 HTML 요소를 알려줍니다.

마지막으로 해당 옵션의 값을 선택하기 위해 e.target.innerHTML을 사용하고 이를 console.log() 메소드 내부에 전달하여 콘솔 창에서 출력을 볼 수 있습니다.