:selected 는 선택박스에서 선택된 요소를 반환해 줍니다.
원문 링크 
http://api.jquery.com/selected-selector/
- jQuery(':selected')
:selected 선택자는 <option> 태그 전용입니다. 체크박스나 라디오 버튼은 :checked 선택자를 사용하셔야 합니다.
예 제
선택된 것의 텍스트를 표시해 줍니다. 다중 선택이 가능하니 컨트롤 키를 누른 상태에서 선택해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.trigger('change');
</script>
</body>
</html>미리보기
select 의 change 함수가 나왔네요. 뭔가가 변화된다면 호출되는 함수입니다. 기본 JavaScript의 이벤트함수인 onchange의 역할을 하네요. 그리고 그 안에 each 함수가 있습니다. 선택된 것이 있는 만큼 루프(Loop)를 돌리는 함수입니다. 선택상자 제어하기 참 쉽네요.
jQuery 사용의 최대 강점은 이런 류의 코딩 노가다를 획기적으로 줄여 주는 것에 있는 것 같습니다. 사실 위 예제같은 것을 베이직 자바스크립트로 처리하려면 좀 귀찮은데 말이죠. ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - addClass(), 클래스 추가하기 (5) | 2011.02.25 |
|---|---|
| jQuery API 정복 - 눈에 보이는 요소 찾기 : visible (5) | 2011.02.24 |
| jQuery API 정복 - text 박스 찾기 : text (3) | 2011.02.24 |
| jQuery API 정복 - submit 버튼 찾기 : submit (4) | 2011.02.22 |
| jQuery API 정복 - reset 버튼 찾기 : reset (2) | 2011.02.21 |
| jQuery API 정복 - radio 버튼 찾기 : radio (2) | 2011.02.21 |
| jQuery API 정복 - type=password 인 것 찾기 : password (2) | 2011.02.18 |
| jQuery API 정복 - 다른 요소를 포함한 요소 찾기 : parent (2) | 2011.02.18 |