[jquery]|제이쿼리 :: selectbox 동적 추가 하기

<select id="select1" onchange="itemChange()">

<option>키보드</option>

<option>마우스</option>

<option>모니터</option>

</select>

 

<select id="select2">

</select>

1차 셀렉트박스에 따라 2차 셀렉트박스 자동생성(동적추가)하기 기능이다

function itemChange(){

 

var keyboard = ["갈축","청축","적축"];

var mouse = ["광마우스","유선마우스","비싼마우스","미키마우스"];

var monitor = ["17인치","22인치","24인치","26인치"];

 

var selectItem = $("#select1").val();

 

var changeItem;

 

if(selectItem == "키보드"){

changeItem = keyboard;

}

else if(selectItem == "마우스"){

changeItem = mouse;

}

else if(selectItem == "모니터"){

changeItem =  monitor;

}

 

$('#select2').empty();

 

for(var count = 0; count < changeItem.size(); count++){                

                var option = $("<option>"+changeItem[count]+"</option>");

                $('#select2').append(option);

            }

 

}

위와 같이 1차 셀렉트박스에 따라 2차 셀렉트박스 선택을 요구하는 상황이 올때 위와 같이 사용하면 된다.