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 form submit()
- [jQeury] jQuery css, jQuery 스타일 적용
'jQuery' 카테고리의 다른 글
[jQuery] window 화면 사이즈를 이용한 페이징 구현 (0) | 2016.02.23 |
---|---|
[jQuery] jquery hide() show() animate() (0) | 2016.01.28 |
[jQuery] jquery get get() (0) | 2015.12.18 |
[jQuery] jquery form submit() (0) | 2015.12.17 |
[jQuery] jquery change change() (0) | 2015.12.16 |