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() 메소드 내부에 전달하여 콘솔 창에서 출력을 볼 수 있습니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn