[ JQuery ] Select Box 활용 노하우

참고 : http://blog.naver.com/findaday?Redirect=Log&logNo=121439508

1. HTML 구조

<select id="selectBox" name="selectBox">
   <option value=""></option>
   <option value="first">first</option>
   <option value="second">second</option>
   <option value="third">third</option>
< /select>

2. JQuery 로 선택된 값 읽기

// 선택된 옵션의 text 구하기
JQuery("#selectBox option:selected").text();

// 선택된 옵션의 value 구하기
JQuery("#selectBox option:selected").val();
JQuery("select[name=selectBox]").val();

// 선택된 옵션 index 구하기
JQuery("#selectBox option").index(JQuery("#selectBox option:selected"));

3. option 값 추가

// 마지막에 option 추가
JQuery("#selectBox").append("<option value="1">Apples</option>");
JQuery("#selectBox").append("<option value="2">After Apples</option>");

// 처음에 option 추가
JQuery("#selectBox").prepend("<option value="0">Before Apples</option>");

// 모든 option 변경
JQuery("#selectBox").html("<option value="2">Oranges</option>");

// 특정 위치에 option 변경
JQuery("#selectBox option:eq(1)").replaceWith("<option value="2">Some apples</option>");
JQuery("#selectBox option:eq(2)").replaceWith("<option value="3">Some bananas</option>");

// Insert an item in after a particular position
JQuery("#selectBox option:eq(0)").after("option value="4">Some pears</option>");

// Insert an item in before a particular position
JQuery("#selectBox option:eq(3)").before("<option value="5">Some apricots</option>");

4. option 선택하기

// 지정된 index 값으로 select 하기
JQuery("#selectBox option:eq(2)").attr("selected","selected");
JQuery("#selectBox option:eq(2)").attr("selected",true);

// text 값으로 select 하기
JQuery("#selectBox").val("Some oranges").attr("selected","selected");

// value 값으로 select 하기
JQuery("#selectBox").val("2");

5. option 삭제

// 지정된 인덱스 값의 item 삭제
JQuery("#selectBox option:eq(0)").remove();

// 첫번째 item 삭제
JQuery("#selectBox option:first").remove();

// 마지막 item 삭제
JQuery("#selectBox option:last").remove();

6. 기타

// SelectBox 아이템 갯수 구하기
JQuery("#selectBox option").size();

// 선택된 옵션 앞의 아이템 갯수
JQuery("#selectBox option:selected").prevAll().size();

// 선택된 옵션 후의 아이템 갯수
JQuery("#selectBox option:selected").nextAll().size();

// Getting values when item is selected
JQuery("#selectBox").change(function() {
   alert(JQuery(this).val());
   alert(JQuery(this).children("option:selected").text());
});