자바스크립트로 select 태그 값 가지고 오는 방법

HTML에서 select 태그는 드롭다운 메뉴를 만드는 데 사용됩니다. 선택된 옵션의 값을 자바스크립트로 가져오는 방법은 여러 가지가 있습니다.

Select element

1. selectedIndex 속성 사용

가장 간단한 방법은 selectedIndex 속성을 사용하는 것입니다. selectedIndex는 선택된 옵션의 인덱스를 나타냅니다. 다음 코드는 select 태그의 ID가 mySelect인 경우 선택된 옵션의 값을 가져오는 예시입니다.

const selectElement = document.getElementById('mySelect');
const selectedIndex = selectElement.selectedIndex;
const selectedValue = selectElement.options[selectedIndex].value;

console.log(selectedValue); // 선택된 옵션의 값 출력

2. selectedOptions 속성 사용

selectedOptions 속성은 선택된 모든 옵션을 배열로 반환합니다. 다음 코드는 select 태그의 ID가 mySelect인 경우 선택된 모든 옵션의 값을 출력하는 예시입니다.

const selectElement = document.getElementById('mySelect');
const selectedOptions = selectElement.selectedOptions;

for (const option of selectedOptions) {
  console.log(option.value); // 선택된 모든 옵션의 값 출력
}

3. querySelector 사용

querySelector 메서드를 사용하여 선택된 옵션을 선택할 수도 있습니다. 다음 코드는 select 태그의 ID가 mySelect이고 selected 속성이 있는 옵션의 값을 가져오는 예시입니다.

const selectedValue = document.querySelector('#mySelect option[selected]').value;

console.log(selectedValue); // 선택된 옵션의 값 출력

4. addEventListener 사용

addEventListener 메서드를 사용하여 change 이벤트를 감지하고 선택된 옵션의 값을 가져올 수 있습니다. 다음 코드는 select 태그의 ID가 mySelect인 경우 선택이 변경될 때마다 선택된 옵션의 값을 출력하는 예시입니다.

const selectElement = document.getElementById('mySelect');

selectElement.addEventListener('change', (event) => {
  const selectedValue = event.target.value;

  console.log(selectedValue); // 선택된 옵션의 값 출력
});

5. jQuery 사용

jQuery 라이브러리를 사용하면 select 태그 값을 더 쉽게 가져올 수 있습니다. 다음 코드는 select 태그의 ID가 mySelect인 경우 선택된 옵션의 값을 가져오는 예시입니다.

const selectedValue = $('#mySelect').val();

console.log(selectedValue); // 선택된 옵션의 값 출력