관계에 따른 메뉴 구성방안 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

관계에 따른 메뉴 구성방안 정보

JavaScript 관계에 따른 메뉴 구성방안

본문

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

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


<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>
추천
1

댓글 1개

전체 931
개발자팁 내용 검색 JavaScript에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT