[jQuery] 선택된 select의 option text 가져오는 방법

예전에 선택된 radio 버튼의 값을 가져오는 방법에 대해 포스팅을 한 적이 있습니다.

조금은 성격이 비슷한 내용이지만 이번에는 select box의 value 값이 아닌 option 에 담겨 있는 텍스트를 가져오는 방법을 소개 합니다.

보통 select의 선택된 값을 가져오기 위해서는 이런 방법을 사용합니다.

$(document).ready(function(){
    $("#select_box").on("change", function(){
        console.log($(this).val());
    });
});

select_box라는 ID를 가진 셀렉트박스의 change 이벤트. 즉, 선택을 하게 되면 콘솔 로그로 선택된 요소의 value값을 출력하는 예제입니다.

그런데 여기서 value값이 아닌 text를 가져오려면 방법이 다릅니다. text라 함은 select 안에 존재하는 option 태그를 예로 들어보겠습니다.

<select id="select_box">
    <option value="1">1번</option>
    <option value="2">2번</option>
    <option value="3">3번</option>
</select>

value에 담긴 1, 2, 3이 아닌 option 태그에 담겨진 1번, 2번, 3번을 가져오는 것입니다.

 

그럼 위 처럼 코드를 작성해보겠습니다.

$(document).ready(function(){
    $("#select_box").on("change", function(){
        console.log($(this).find("option[value='" + $(this).val() + "']").text());
    });
});

코드가 조금 길어졌습니다. 우선 해석부터 하자면 “선택 된 option의 value에 해당하는 text를 가져와라” 입니다.

$(this) 뒤에 추가적인 셀렉터를 붙일 수 없기 때문에 find() 메소드를 이용해 자식요소를 찾습니다. 만약 첫번째 option을 선택했다면 셀렉터는 $(this).find(“option[value=’1′]) 이 될 것입니다. 이 선택된 요소에서 text() 메소드를 이용해 option 태그 안에 담겨진 문자열을 가져옵니다.