[ HTML ] <select> 선택시 변경 처리하기

HTML의 <select> 요소에서 항목이 선택될 때 이벤트를 처리하는 방법은 JavaScript의 change 이벤트 리스너를 사용하는 것입니다. 아래는 그 방법에 대한 예시 코드입니다:

HTML

<select id="mySelect">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

JavaScript

// select 요소를 선택합니다
const selectElement = document.getElementById('mySelect');

// change 이벤트 리스너를 추가합니다
selectElement.addEventListener('change', function(event) {
    // 선택된 값 가져오기
    const selectedValue = event.target.value;
    // 처리할 작업 실행
    console.log(`선택된 값: ${selectedValue}`);
});

설명

1. document.getElementById('mySelect'): <select> 요소를 가져옵니다.
2. addEventListener('change', ...): <select>에서 선택된 값이 변경될 때마다 이벤트 리스너가 호출됩니다.
3. event.target.value: 선택된 옵션의 값을 가져옵니다.
4. 선택된 값에 따라 원하는 작업을 수행할 수 있습니다.

이 방법을 사용하면 사용자가 드롭다운 메뉴에서 옵션을 선택할 때마다 지정된 작업을 실행할 수 있습니다.