jQuery selectbox 제어 및 사용법

jQuery selectbox 제어 및 사용법

제가 자주 사용하는 방법 위주로 포스팅하겠습니다.

1. select box 현재 선택된 값 구하기

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

$("#select_box > option:selected").val()

$("select[name=name]").val();

 

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

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

 

3. select box 선택된 위치 구하기

var index = $("#select_box option").index($("#select_box option:selected")); 

4. select box 옵션 추가 하기

// 옵션 마지막에 추가하기

$("#select_box").append("<option value='10'>값10</option>");

 

// 옵션 처음에 추가하기

$("#select_box").prepend("<option value='1'>값1</option>");

// 0번째 item 다음에 삽입

$("#select_box option:eq(0)").after("<option value='2'>값2</option>");

 

// 3번째 item 전에 삽입

$("#select_box option:eq(3)").before("<option value='3'>값3</option>");

5. select box 옵션 삭제 하기

// 첫번째 item 삭제

$("#select_box option:first").remove();

 

// 마지막 item 삭제

$("#select_box option:last").remove();

// 3번째 item 삭제

$("#select_box option:eq(3)").remove();

6. select box 선택하기

// 지정된 index 값으로 select 하기

$("#select_box option:eq(2)").attr("selected", "selected");

 

// text 값으로 select 하기

$("#select_box").val("Some oranges").attr("selected", "selected");

 

// value 값으로 select 하기

$("#select_box").val("2");

$("#select_box > option[@value=지정값]").attr("selected", "true");

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

 

// SelecBox 아이템 갯수 구하기

alert($("#select_box option").size());

 

// 선택된 옵션 앞의 아이템 갯수

alert($("#select_box option:selected").prevAll().size());

 

// 선택된 옵션 후의 아이템 갯수

alert($("#select_box option:selected").nextAll().size());

도움이 되셨나요?