728x90
반응형
: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 에 있는 내용임을 밝힙니다.
728x90
반응형
'JQUERY > 함수' 카테고리의 다른 글
| [jQuery] :selected (0) | 2015.12.29 |
|---|---|
| jQuery API 정복 - 부모 찾기, parent() (0) | 2015.11.12 |
| .animate() (0) | 2015.11.12 |
| jQuery(제이쿼리) : .is() (0) | 2015.11.12 |
| [Jquery] attr 과 prop (0) | 2015.10.21 |
| [jQuery] attr, prop, not - input[type='checkbox'] 체크박스 제어 (0) | 2015.10.21 |
| [jQuery selectBox]자바스크립트 onchange 를 jquery에서는? (0) | 2015.03.18 |
| [jQuery-Event]keydown(),keypress(),keyup() - 키보드 이벤트 (0) | 2015.03.18 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!