[JAVASCRIPT] Ajax 다중 셀렉트 박스 동적으로 만들기

 

셀렉트박스가 여러개인데 첫번째 박스를 선택 후 관련된 데이터들을 두번째 박스에 갖고 오고 싶은 경우 PHP, JSP와 같은 정적인 웹사이트는 새로고침을 해야 데이터베이스에서 해당 데이터를 갖고 올 수 있다.

 

새로고침을 할 필요없이 자연스럽게 셀렉트박스의 데이터를 변경하고 싶은 경우 jquery를 사용하면 간단하게 해결 된다.

 

먼저 selectbox가 있는 페이지와 데이터베이스를 불러오는 페이지 두 개의 페이지를 준비하면 된다.

(한 페이지에서 할 수 있지만 데이터가 많은 경우를 고려하면 나누는게 이득이 많다.)

 

---

selectbox가 있는 페이지 (클라이언트단)

 html 

<select name="selectbox1">
	<!-- 첫번째 selectbox도 데이터베이스에서 불러와서 사용하는게 일반적이다. -->
    <option value=''>선택</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>
<select name="selectbox2">
	<option value=''>선택</option>
</select>

 javascript 

<script>
$("select[name='selectbox1']").change(function(){
    var selectbox1 = $(this).val(); // 선택한 박스1

    $.ajax({
        url  : "./select_box_list.php", // 셀렉트박스2의 데이터 리스트를 불러올 페이지
        type : "POST",
        data : "selectbox1="+selectbox1, // 셀렉트박스1의 선택한 데이터를 전송
        error:function(){ // 오류가 발생한 경우 호출하는 함수
        },
        success:function(data) { // 성공할 경우 호출하는 함수
        	json = eval("(" + data + ")"); // 받아온 데이터를 json 형태로 변경
            
        	$("select[name='selectbox2']").empty(); // 셀렉트박스2 비우기
            
        	$.each(json.list, function(key,obj){ // 셀렉트박스2의 데이터를 json list로 받아온다.            

                readData = "<option value='"+obj.code+"'>"+obj.name+"</option>"; // 셀렉트박스2 옵션 설정

                $("select[name='selectbox2']").append(readData);   // 셀렉트박스2에 넣기
            });
        }
    });
});
</script>

---

selectbox2 데이터 리스트 불러오는 페이지

php로 작성되었지만 다른 언어로 데이터베이스의 데이터를 불러온 뒤 json 포맷으로 변경하면 똑같이 동작한다.

<?
    $selectParam = $_POST["selectbox1"];      // 셀렉트박스1의 선택된 데이터

    // 구분1에 따른 구분2 DB에서 가져와 $Result[] 배열에 넣기 --------------------//
    $sql =  "   SELECT   value, name
                FROM     selectboxDB
                WHERE    selectbox1 = '$selectParam'
                ORDER BY priorno
		    "; 

    $result = mysqli_query($connect, $sql) or error(mysqli_error());

    while($row = mysqli_fetch_array($result)) {
    	$rowList[] = $row;
    }

    // JSON Format 으로 데이터를 저장
    $selectResult  .= "{\"list\":[";

    if (sizeof($rowList)  >  0) { // 셀렉트박스1에 속하는 데이터 리스트가 존재하는 경우
        for ($i=0 ; $i<sizeof($rowList) ; $i++) {
            if ($i != 0) {
                $selectResult  .=  ",";
            }
            $selectResult  .=  "{\"code\":\"".$rowList[$i]['value']."\",\"name\":\"".$rowList[$i]['name']."\"}";
        }
    }

    $selectResult  .= "]}";
    
    echo $selectResult;   // charset 변환
?>