관계에 따른 메뉴 구성방안

금일 제작의뢰에 5단계 하위메뉴 구성에 대한 의뢰가 있어서 사전 작업중 다른분이 채택되어 못 써먹게 되어 아쉬워 여기에라도 남겨봅니다.

코드는 총 5단계(10자리)로 되어 있으며 2자리마다 하위메뉴로 내려가게 해뒀습니다.

[code]

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var sitecode = [];
sitecode.push([1000000000, "내용1", ""]);
sitecode.push([1010000000, "내용2", ""]);
sitecode.push([1010100000, "내용3", ""]);
sitecode.push([1010120000, "내용3-1", ""]);
sitecode.push([1010120100, "내용3-1-1", ""]);
sitecode.push([1010120200, "내용3-1-2", ""]);
sitecode.push([1010120300, "내용3-1-3", ""]);
sitecode.push([1010130000, "내용3-2", "3"]);
sitecode.push([1010101000, "내용4", ""]);
sitecode.push([1010101100, "내용4-1", ""]);
sitecode.push([1010101010, "내용45", "abc"]);
sitecode.push([1010101012, "내용46", "abc"]);
sitecode.push([1010101013, "내용47", "abc"]);
sitecode.push([1010101110, "내용55", "URL주소"]);
sitecode.push([1010101112, "내용56", "abc"]);
sitecode.push([1010101113, "내용57", "abc"]);
sitecode.push([2000000000, "대1", ""]);
sitecode.push([3000000000, "대2", ""]);
sitecode.push([4000000000, "대3", ""]);
sitecode.push([5000000000, "대4", ""]);

var step_arr = ["100000000","1000000","10000","100","1"];

function change_sel(sel_value, tf = true){
    if(sel_value == ""){
        sel_new();
        return false;
    }
    var step = 0;
    for(i = step_arr[0]; i >= 1; i = i/100){
        if(sel_value % i == 0){
            break;
        }
        step++;
    }
    tmp = step + 1;
    
    $("select#sel_step"+tmp+" option").remove();
    $("select#sel_step"+tmp).append("<option value=\""+sel_value+"\">전체</option>");

    if(tmp > step_arr.length){
        return false;
    }

    for(i = tmp + 1; i < step_arr.length; i++){
        $("select#sel_step"+i).css('display', 'none');
    }
    $("select#sel_step"+tmp).css('display', 'block');

    for(i = 0; i < sitecode.length; i++){
        if(sitecode[i][0] == sel_value && sitecode[i][2] != ""){
            if(tf){
                alert(sitecode[i][2]);
            }
            break;
        }

        if(
            (sitecode[i][0]%step_arr[step]) != 0
            && (sitecode[i][0]%step_arr[tmp]) == 0
            && sitecode[i][0]%sel_value < step_arr[step]
        ){
            $("select#sel_step"+tmp).append("<option value=\""+sitecode[i][0]+"\">"+sitecode[i][1]+"</option>");
        }
    }
}
function sel_new(){
    $("select#sel_step0 option").remove();
    for(i = 1; i < step_arr.length; i++){
        $("select#sel_step"+i).css('display', 'none');
    }

    $("select#sel_step0").append("<option value=\"\">전체</option>");
    for(i = 0; i < sitecode.length; i++){
        if(sitecode[i][0]%step_arr[0] == 0){
            $("select#sel_step0").append("<option value=\""+sitecode[i][0]+"\">"+sitecode[i][1]+"</option>");
        }
    }
}

function select_sel(sel_value){
    var step = 0;
    for(i = 100000000; i >= 1; i = i/100){
        if(sel_value % i == 0){
            break;
        }
        step++;
    }
    var sub_sel_value = "";
    var start_str = 2;
    
    for(cnt = 0; cnt <= step; cnt++){
        $("select#sel_step"+cnt).css('display', 'block');
        sub_sel_value = sel_value.substr(0, start_str);
        sub_sel_value = sub_sel_value * step_arr[cnt];
        change_sel(sub_sel_value, false);
        $("#sel_step"+cnt).val(sub_sel_value);
        start_str = start_str + 2;
    }
}

$(document).ready(function() {
    sel_new();
    //페이지가 지정되었을 경우
    //select_sel("1010100000");
});
</script>

<select id="sel_step0" name="sel_step0" onchange="change_sel(this.value);" class="sel_step">
</select>

<select id="sel_step1" name="sel_step1" onchange="change_sel(this.value);" class="sel_step">
</select>

<select id="sel_step2" name="sel_step2" onchange="change_sel(this.value);" class="sel_step">
</select>

<select id="sel_step3" name="sel_step3" onchange="change_sel(this.value);" class="sel_step">
</select>

<select id="sel_step4" name="sel_step4" onchange="change_sel(this.value);" class="sel_step">
</select>

[/code]