본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected

by zoo10 2011. 2. 22.

:selected 는 선택박스에서 선택된 요소를 반환해 줍니다.

원문 링크 http://api.jquery.com/selected-selector/

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 에 있는 내용임을 밝힙니다.