jQuery - select박스 선택된 값 가져오기

jQuery를 통해 select박스 제어를 알아보겠습니다.

/********** value **********/
$(선택자).val(); //value값 가져오기
$("#id").val(); //id로 접근하여 value가져오기
$("select[속성='속성명']").val(); //속성으로 접근하여 value가져오기

/********** text **********/
$(선택자 option:selected).text(); //text값 가져오기
$("#id option:selected").text();
$("select[속성='속성명'] option:selected").text();

 

text값은 가져올때 해당자식인 option의 선택된 개체를 가져와야합니다. option:selected

해당 옵션이 없으면 select 자식으로 들어간 option값 전부를 가져오게 됩니다.

 

change이벤트에 따른 val값 및 text값을 가져오는 예제

name속성이 location인 select박스의 값이 변경됨에 따른 선택값 처리를 알아보겠습니다.

HTML

<div>
  <select name="location">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  </select>
</div>
<div id="output">
</div>

 

jQuery

$("select[name=location]").change(function(){
  console.log($(this).val()); //value값 가져오기
  console.log($("select[name=location] option:selected").text()); //text값 가져오기
});

 

 

select박스 값이 바뀔때마다 console.log가 출력되는걸 볼 수 있습니다.

 

---

추가적으로 SELECT - OPTION 태그 내부에 VALUE값을 지정을 안하는 경우가 있는데, 이런 경우에는 jQuery .val() 이나 바닐라 .value로 값을 가져올 경우 text값을 가져오게 되니 유의하시기 바랍니다.