JavaScript의 드롭다운 목록에서 선택한 옵션의 값 가져오기
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()
메소드 내부에 전달하여 콘솔 창에서 출력을 볼 수 있습니다.