jQuery 셀렉트 박스 제어

jQuery를 이용한 HTML Form 의 select 컨트롤 예제 

 

선택 된 option의 value 가져오기

var selected_value = $("#[id]").val();

 

for 문으로 서버에서 받아 온 option html로 출력하기

for(var i = 0; i < obj.length; i++){
	$("#[id]").append("<option value='" + obj[i].val + "' >" + obj[i].name + "</option>");
}

 

value 에 해당하는 option 선택하기

$("#[id]").val("1").prop("selected", true); //값이 1인 option 선택

 

option 인덱스로 선택하기

$("#[id] option:eq(index)").prop("selected", true); //index에 해당하는 option 선택

 

[참고] Native Javascript로 select option 만들기

oSel = document.getElementById("셀렉트박스아이디");

/// 옵션박스 초기화
for( i =  (oSel.options.length -1)  ; 0 <= i  ; i--){
	oSel.options[i] = null;
}

/// 옵션 생성 후 추가
tOpt		= document.createElement("OPTION");
tOpt.value  = "1";
tOpt.text   = "선택하세요";
oSel.add(tOpt);