[jQuery] select박스 선택한 option text값 출력

select 박스 선택한 option text값만 출력하기.

 

---

select 박스에서 선택한 value를 출력하여 사용하는 경우는 자주 있다.

하지만 value 값이 아닌 선택한 text 값만 뽑아서 사용하고 싶은 경우가 생겨서 알게 되었다.

간단하지만 헷갈릴만한 내용이 있어 정리해둔다 !

 

 

 

 

 

 

평소 javascript에서 value를 출력할 때 아래와 같이 사용하기에 text도 같은 맥락인 줄 알았다..

//testId의 value출력하기
$("#testId").val();

//testId를 select박스의 id라고 가정했을때
//testId의 선택한 option의 value가 출력된다.

 

 

 

하지만 아래와 같이 text를 출력하면 

testId의 option의 모든 text값을 나열한다.

$("#testId").text();

 

따라서 찾아보고 실행해본 결과,, 선택한 option의 text값만 출력하고 싶을 때는 조금 다르다는 거를 알았다!

$("#testId option:checked").text();

이렇게 option:checked를 추가해주면 select박스의 선택한 option의 text만 출력하게 된다 !

val()와 text()의 사용방법이 조금 다르니 유의하여 사용하자 !! :)