[jQuery] SelectBox(셀렉트 박스) 제어

다음과 같이 jQuery로 select box 를 제어할 수 있는 방법을 정리해 보았습니다.

참고 바랍니다. 

선택된 값(value) 가져오기

 
$("#selectBox option:selected").val();
$("select[name=name]").val();
 

선택된 내용 가져오기

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

선택된 옵션의 갯수 구하기

 
$('#selectbox option').size();
 

선택된 옵션의 index 값 구하기

 
$('#selectbox option').index($('#selectbox option:selected'));
 

값으로 옵션값 선택하기

 
// 지정된 인덱스값으로 선택하기
$("#selectBox option:eq(2)").attr("selected", "selected");
 
// text값으로 선택하기
$("#selectBox").val("Someoranges").attr("selected", "selected");
 
// value값으로 선택하기
$("#selectBox").val("2").attr("selected", "selected");;
 

옵션 추가 & 삭제

 
/*selectbox에 옵션 추가하기*/
$('#selectbox').append('<option value="green">green</option>'); // selectbox 옵션 아래에 추가
$('#selectbox').prepend('<option value="green">green</option>'); // selectbox 옵션 최상단에 추가
$('#selectbox option:eq(2)').after('<option value="green">green</option>'); // 특정위치 아래에 추가
$('#selectbox option:eq(2)').before('<option value="green">green</option>'); // 특정위치 위에 추가
 
/*selectbox에서 옵션 삭제하기*/
$('#selectbox option:first').remove(); //첫번재 삭제
$('#selectbox option:last').remove(); //마지막 삭제
$('#selectbox option:eq(2)').remove(); // 특정위치 삭제
$('#selectbox').find('option').remove(); // 모두 삭제
 

select 접근방법에 있어 더욱 효율적인 방법이 있다면 계속 업로드 하겠습니다.

많은 의견 바랍니다. ^^