[Javascript/JQuery]SelectBox에 선택된 값과 텍스트 가져오기

[Javascript/JQuery]SelectBox에 선택된 값과 텍스트 가져오기

안녕하세요 미나라이입니다.

 

이번에는 웹개발 하면서 자주 쓰게되는 셀렉트 태그의 선택된 값을 가져오는 소스를 정리 해 보았습니다.

HTML

<select id="country" onChange="getselect()">
  <option value="ko">Korea</option>
  <option value="jp">Japan</option>
  <option value="en">America</option>
</select>

Javascript

function getselect() {
    var select = document.getElementById('country');
    var option = select.options[select.selectedIndex];

    document.getElementById('value').value = option.value;
    document.getElementById('text').value = option.text;
}

Jquery

$(document).ready(function(){
  $("#country").change(function(){
    // Value값 가져오기
    var val = $("#country :selected").val();
    // Text값 가져오기
    var text = $("#country :selected").text();
    // Index가져오기
    var index = $("#country :selected").index();
    
    $("#value").val(val);
    $("#text").val(text);
  });
});

위 소스로 호출이 안 될 경우

$(document).ready(function(){
  $("#country").change(function(){
    var val = $('#country').find(":selected").val();
    var text = $('#country').find(":selected").text();
    
    $("#value").val(val);
    $("#text").val(text);
  });
});