[제이쿼리] 동적으로 select option 추가 하기(empty와 append)

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.

append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌

특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을

알아 보도록 하자.

예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄

사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.

혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.

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

<option>키보드</option>
<option>마우스</option>
<option></option>
</select>
 
<select id="select2">
</select>

먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때

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);
            }
 
}

여기서 주목할 것은

empty()와 append 이다

기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고

append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.

이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.

키보드 마우스 모니터 선택해주세요 선택해주세요