컬쳐N라이프

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'));
  });
});

- [jQuery] jquery get get()

- [jQuery] jquery form submit()

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

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

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