자바스크립트에서 select option 값 가져오기

HTML select 태그는 웹 페이지에서 드롭다운 메뉴를 만드는 데 사용됩니다. 자바스크립트를 사용하여 선택된 option의 값을 가져올 수 있으며, 이는 다양한 상황에서 유용하게 활용될 수 있습니다.

1. 기본 방법

다음은 select option 값을 가져오는 가장 기본적인 방법입니다.

const selectBox = document.querySelector('#select-box');
const selectedOption = selectBox.options[selectBox.selectedIndex];
const value = selectedOption.value;

• document.querySelector('#select-box'): id가 select-box인 select 태그를 가져옵니다.
• selectBox.options: 선택 가능한 option들의 배열입니다.
• selectBox.selectedIndex: 현재 선택된 option의 인덱스입니다.
• selectedOption: 현재 선택된 option 객체입니다.
• selectedOption.value: 선택된 option의 value 속성 값입니다.

2. jQuery 사용

jQuery를 사용하면 코드를 더 간결하게 작성할 수 있습니다.

const value = $('select#select-box').val();

• $('select#select-box'): id가 select-box인 select 태그를 선택합니다.
• .val(): 선택된 option의 value 속성 값을 가져옵니다.

3. 여러 개의 option 값 가져오기

select 태그가 multiple 속성을 가지고 있는 경우, 선택된 모든 option의 값을 배열로 가져올 수 있습니다.

const values = Array.from(selectBox.options).filter(option => option.selected).map(option => option.value);

• Array.from(selectBox.options): selectBox.options를 배열로 변환합니다.
• .filter(option => option.selected): 선택된 option만 남깁니다.
• .map(option => option.value): 선택된 option의 value 속성 값들을 배열에 담습니다.

4. 선택된 option의 텍스트 가져오기

selectedOption.text 속성을 사용하여 선택된 option의 텍스트를 가져올 수 있습니다.

const text = selectedOption.text;

5. 예시

다음은 select option 값을 가져와서 다른 요소에 출력하는 예시입니다.

<select id="select-box">
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>

<span id="output"></span>

const selectBox = document.querySelector('#select-box');
const output = document.querySelector('#output');

selectBox.addEventListener('change', () => {
  const value = selectBox.options[selectBox.selectedIndex].value;
  output.textContent = value;
});

6. 참고자료

• [JS] SELECT태그에서 선택된 option 값 가져오기: https://velog.io/@jyyoun1022/JS-SELECT%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EC%84%A0%ED%83%9D%EB%90%9C-option-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0
• javascript selectbox option 값 구하기: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
• 자바스크립트(JavaScript) 셀렉트 박스(select box) 선택된 옵션(selected option)의 값(value), 텍스트(text) 가져오기: https://gocoder.tistory.com/51