'선택박스 제어'에 해당되는 글 1건

안녕하세요. 

이번에는 JQuery를 SelectBox를 제어하는 방법을 알아보도록 하겠습니다.

1. 현재 선택된 값을 구하기.

 //-========================

$("#selName option:selected").val();

 //-========================

2. 현재 선택된 내용을 구하기.

//-========================

$("#selName option:selected").text();

 //-========================

3. 선택박스에 옵션 추가하기

//-========================

// 기본 옵션 추가
$("#selName").append("<option value='값'>이름</option>");

// 옵션 최상단에 추가
$("#selName").prepend("<option value='값'>이름</option>");

// 특정 위치 아래에 옵션 추가
$("#selName option:eq(1)").after("<option value='값'>이름</option>");

// 특정 위치 위에 옵션 추가
$("#selName option:eq(2)").before("<option value='값'>이름</option>");

//-========================

4. 선택박스에 옵션 삭제하기

//-========================

// 첫번째 옵션 삭제하기
$("#selName option:first").remove();

// 마지막 옵션 삭제하기
$("#selName option:last").remove();

// 특정 위치 옵션 삭제하기
$("#selName option:eq(3)").remove();

// 모든 옵션 삭제하기
$("#selName").find("option").remove();

 //-========================

5. 특정 값으로 selected 이벤트를 주기

//-========================

// index 값으로 주기
$("#selName option:eq(0)").attr("selected","selected");

// value 값으로 주기
$("#selName").val("이름").attr("selected","selected");

 //-========================

6. 선택된 옵션의 index 구하기

//-========================

$("#selName option").index($("#selName option:selected"));

 //-========================

7. 선택된 옵션의 갯수 구하기

//-========================

$("#selName option").size();

 //-========================