자바스크립트(JavaScript) 셀렉트 박스(select box) 선택된 옵션(selected option)의 값(value), 텍스트(text) 가져오기

jQuery를 이용하면 아래 코드를 활용해서 셀렉트 박스의 옵션을 제어할 수 있습니다.

$('#selectbox > option'); // id를 기준으로, selectbox의 모든 옵션 조회
$('#selectbox > option:checked'); // id를 기준으로, selectbox에서 현재 선택된 옵션 조회
$('select[name="selectbox"] > option:checked').val(); // name을 기준으로, selectbox에서 현재 선택된 옵션의 값(value) 조회
$('select[name="selectbox"] > option:checked').text(); // name을 기준으로, selectbox에서 현재 선택된 옵션의 텍스트(text) 조회

 

 

아래 코드는 순수 JS를 선호하시는 분들께 유용할 듯합니다.

document.querySelector('#selectbox > option:checked'); // id를 기준으로, selectbox에서 현재 선택된 옵션 조회
document.querySelector('#selectbox > option:checked').value; // id를 기준으로, selectbox에서 현재 선택된 옵션의 값(value) 조회
document.querySelector('select[name="selectbox"] > option:checked').innerText; // name을 기준으로, selectbox에서 현재 선택된 옵션의 텍스트(text) 조회

 

추가적으로 옵션의 인덱스를 기준으로 접근하고 싶다면 싶다면 다음과 같이 접근하시면 됩니다.

document.querySelector('#selectbox')[0]; // 첫 번째 옵션
document.querySelector('#selectbox')[1]; // 두 번째 옵션