[jQuery] jquery select value, select 값 가져오기, select 속성 값

jQuery select 사용법에 대해서 알아보겠습니다.

select box를 사용하다보면 select box의 value,

즉 텍스트가 필요할 수도 있고 그 외 다른 속성들이 필요할 수도 있습니다.

value값은 val() 형태로 가져올 수 있고

그 외 필요한 값들은 DOM 안에 attribute 값을 추가하여 사용하면 편하게

사용할 수 있습니다.

소스와 예제를 통해서 알아보겠습니다.

- html 

	
<select id="select">
<option value="카카오톡" code="Kakao" no="1">1. 카카오톡</option>
<option value="라인" code="Line" no="2">2. 라인</option>
<option value="페이스북" code="Facebook" no="3">3. 페이스북</option>
<option value="인스타그램" code="instagram" no="4">4. 인스타그램</option>
</select>
<br/>
<br/>
<div id="value"></div>
<div id="code"></div>
<div id="no"></div>

- javascript 

	
$(document).ready(function () {
    // 초기 값 지정
    $('#value').text($("#select option:selected").val());
    $('#code').text($("#select option:selected").attr('code'));
    $('#no').text($("#select option:selected").attr('no'));
  
    // select 선택이 변경 됐을 때 호출 되는 함수 
    $('#select').change(function() {
    $('#value').text($("#select option:selected").val());
    $('#code').text($("#select option:selected").attr('code'));
    $('#no').text($("#select option:selected").attr('no'));
  });
});

처음 선택된 값을 지정하기 위해서 초기값을 화면에 출력하였고

change() 함수를 이용하여 select의 선택이 변경될 때 

값을 변경하여 화면에 출력하였습니다.

change() 함수는 DOM의 상태가 변경될 때 호출되는 함수입니다.

- change() 함수 알아보기

- [jQuery] jquery change change()

예제보기

- 관련 링크

- [jQuery] jquery get get()

- [jQuery] jquery form submit()

- [jQeury] jQuery css, jQuery 스타일 적용

- jQeury] val(), text() 값 셋팅, 값 가져오기 setValue, setText

- [jQeury] jquery tigger, jquery 함수 실행, 이벤트 실행