셀렉트 박스 순차적으로 선택 (동적 셀렉트박스) + php

5개의 부서를 선택하는 예

<?

//부서 1 데이터
$optA = Array();
$query = "select dept1 from iu_member_config where dept1 <>'' and level=1;";
$result = mysql_query($query);
while ($row = mysql_fetch_row($result)){
    //echo $row[0];
    array_push($optA, $row[0]);
}

//print_r($optA);


//부서 2 데이터
$optB = Array();
$query = "select dept1, dept2 from iu_member_config where dept2 <>'' and level=2 order by dept1 desc;";
$result = mysql_query($query);
$i = 1;
while ($row = mysql_fetch_row($result)){
    //echo $row[0];
    if ($tmp != $row[0]) $i = 0;
    $optB[$row[0]][$i] = $row[1];
    $tmp = $row[0];
    $i++;
}

//print_r($optB);

//부서 3 데이터
$optC = Array();
$query = "select dept2, dept3 from iu_member_config where dept3 <>'' and level=3 order by dept1 desc, dept2 desc;";
$result = mysql_query($query);
$i = 1;
while ($row = mysql_fetch_row($result)){
    //echo $row[0];
    if ($tmp != $row[0]) $i = 0;
    $optC[$row[0]][$i] = $row[1];
    $tmp = $row[0];
    $i++;
}

//print_r($optC);

//부서 4 데이터
$optD = Array();
$query = "select dept3, dept4 from iu_member_config where dept4 <>'' and level=4 order by dept1 desc, dept2 desc, dept3 desc;";
$result = mysql_query($query);
$i = 1;
while ($row = mysql_fetch_row($result)){
    //echo $row[0];
    if ($tmp != $row[0]) $i = 0;
    $optD[$row[0]][$i] = $row[1];
    $tmp = $row[0];
    $i++;
}

//print_r($optD);

//부서 5 데이터
$optE = Array();
$query = "select dept4, dept5 from iu_member_config where dept5 <>'' and level=5 order by dept1 desc, dept2 desc, dept3 desc, dept4 desc;";
$result = mysql_query($query);
$i = 1;
while ($row = mysql_fetch_row($result)){
    //echo $row[0];
    if ($tmp != $row[0]) $i = 0;
    $optE[$row[0]][$i] = $row[1];
    $tmp = $row[0];
    $i++;
}

//print_r($optE);


?>


<select id="d01" name="d01" onChange='sel01(this.value);'>
    <option value="">부서를 선택해주세요</option>
</select>

<select id="d02" name="d02" onChange='sel02(this.value);'>
    <option value="">부서를 선택해주세요</option>
</select>

<select id="d03" name="d03" onChange='sel03(this.value);'>
    <option value="">부서를 선택해주세요</option>
</select>

<select id="d04" name="d04" onChange='sel04(this.value);'>
    <option value="">부서를 선택해주세요</option>
</select>

<select id="d05" name="d05" onChange=''>
    <option value="">부서를 선택해주세요</option>
</select>


<script>

    // var optA = new Array();
    optA = <?=json_encode($optA);?>;
    optB = <?=json_encode($optB);?>;
    optC = <?=json_encode($optC);?>;
    optD = <?=json_encode($optD);?>;
    optE = <?=json_encode($optE);?>;

    //내 정보
    myDept1 = '<?=$mb["mb_0"];?>';
    myDept2 = '<?=$mb["mb_1"];?>';
    myDept3 = '<?=$mb["mb_2"];?>';
    myDept4 = '<?=$mb["mb_3"];?>';
    myDept5 = '<?=$mb["mb_4"];?>';


    //부서 1설정
    for(var count = 0; count < optA.length; count++){
        if(myDept1 == optA[count]) {
            var option = $("<option value='"+optA[count]+"' selected>"+optA[count]+"</option>");
        }else{
            var option = $("<option value='"+optA[count]+"'>"+optA[count]+"</option>");
        }
        $('#d01').append(option);
    }

    //부서 2설정
    for(var count = 0; count < optB[myDept1].length; count++){
        // console.log(optB[myDept1][count]);

        if(myDept2 == optB[myDept1][count]) {
            var option = $("<option value='"+optB[myDept1][count]+"' selected>"+optB[myDept1][count]+"</option>");
        }else{
            var option = $("<option value='"+optB[myDept1][count]+"'>"+optB[myDept1][count]+"</option>");
        }
        $('#d02').append(option);
    }

    //부서 3설정
    for(var count = 0; count < optC[myDept2].length; count++){
        // console.log(optB[myDept1][count]);

        if(myDept3 == optC[myDept2][count]) {
            var option = $("<option value='"+optC[myDept2][count]+"' selected>"+optC[myDept2][count]+"</option>");
        }else{
            var option = $("<option value='"+optC[myDept2][count]+"'>"+optC[myDept2][count]+"</option>");
        }
        $('#d03').append(option);
    }

    //부서 4설정
    for(var count = 0; count < optD[myDept3].length; count++){
        // console.log(optB[myDept1][count]);

        if(myDept4 == optD[myDept3][count]) {
            var option = $("<option value='"+optD[myDept3][count]+"' selected>"+optD[myDept3][count]+"</option>");
        }else{
            var option = $("<option value='"+optD[myDept3][count]+"'>"+optD[myDept3][count]+"</option>");
        }
        $('#d04').append(option);
    }

    //부서 5설정
    for(var count = 0; count < optE[myDept4].length; count++){
        // console.log(optB[myDept1][count]);

        if(myDept5 == optE[myDept4][count]) {
            var option = $("<option value='"+optE[myDept4][count]+"' selected>"+optE[myDept4][count]+"</option>");
        }else{
            var option = $("<option value='"+optE[myDept4][count]+"'>"+optE[myDept4][count]+"</option>");
        }
        $('#d05').append(option);
    }







    //부서 1선택
    function sel01(val){
        //부서 2설정
        $('#d02').empty();
        $('#d02').append("<option value=''>부서를 선택해주세요</option>");
        for(var count = 0; count < optB[val].length; count++){
            var option = $("<option value='"+optB[val][count]+"'>"+optB[val][count]+"</option>");
            $('#d02').append(option);
        }

        //부서 3설정
        $('#d03').empty();
        $('#d03').append("<option value=''>부서를 선택해주세요</option>");


        //부서 4설정
        $('#d04').empty();
        $('#d04').append("<option value=''>부서를 선택해주세요</option>");

        //부서 5설정
        $('#d05').empty();
        $('#d05').append("<option value=''>부서를 선택해주세요</option>");
    }


    //부서 2선택
    function sel02(val){

        //부서 3설정
        $('#d03').empty();
        $('#d03').append("<option value=''>부서를 선택해주세요</option>");
        for(var count = 0; count < optC[val].length; count++){
            var option = $("<option value='"+optC[val][count]+"'>"+optC[val][count]+"</option>");
            $('#d03').append(option);
        }

        //부서 4설정
        $('#d04').empty();
        $('#d04').append("<option value=''>부서를 선택해주세요</option>");

        //부서 5설정
        $('#d05').empty();
        $('#d05').append("<option value=''>부서를 선택해주세요</option>");

    }


    //부서 3선택
    function sel03(val){

        //부서 4설정
        $('#d04').empty();
        $('#d04').append("<option value=''>부서를 선택해주세요</option>");
        for(var count = 0; count < optD[val].length; count++){
            var option = $("<option value='"+optD[val][count]+"'>"+optD[val][count]+"</option>");
            $('#d04').append(option);
        }

        //부서 5설정
        $('#d05').empty();
        $('#d05').append("<option value=''>부서를 선택해주세요</option>");

    }


    //부서 4선택
    function sel04(val){

        //부서 5설정
        $('#d05').empty();
        $('#d05').append("<option value=''>부서를 선택해주세요</option>");
        for(var count = 0; count < optE[val].length; count++){
            var option = $("<option value='"+optE[val][count]+"'>"+optE[val][count]+"</option>");
            $('#d05').append(option);
        }
    }


</script>