[Javascript] 삼단 카테고리 로직 구현하기

javascrpt 의 Array 를 이용하여  select 박스형태로 삼단 카테고리를 만들어 보았다.

jquery를 이용하면 소스가 훨씬 간결해지겠지만, 필자는 옛날사람이라 javascript 형태로 그냥 짜보았다.

 

 

 

<script>
var arrBig = new Array();
arrBig[0] = "";
arrBig[1] = "현대";
arrBig[2] = "삼성";
arrBig[3] = "기아";
 
 
var arrMid_0 = new Array();   // var arrMid_0  = new Array("");
arrMid_0[0] = "";
 
var arrMid_1 = new Array();  // var arrMid_1 = new Array("","라비타","그랜저 XG","스텔라");
arrMid_1[0] = "";
arrMid_1[1] = "라비타";
arrMid_1[2] = "그랜저 XG";
arrMid_1[3] = "스텔라";
 
var arrMid_2 = new Array();  // var arrMid_2 = new Array("","SM5");
arrMid_2[0] = "";
arrMid_2[1] = "SM5";
 
var arrMid_3 = new Array();  // var arrMid_3 = new Array("","카렌스 II","옵티마");
arrMid_3[0] = "";
arrMid_3[1] = "카렌스 II";
arrMid_3[2] = "옵티마";
 
 
 
var arrSml_0 = new Array("");
arrSml_0[0] = "";
 
var arrSml_1_1 = new Array("");    // 라비타
arrSml_1_1[0] = "";
arrSml_1_1[1] = "1.5 DOHC 가솔린 TR";
arrSml_1_1[2] = "1.8 DOHC 가솔린 CR";
 
var arrSml_1_2 = new Array("");    // 그랜저 XG
arrSml_1_2[0] = "";
arrSml_1_2[1] = "Q20";
arrSml_1_2[2] = "Q30";
arrSml_1_2[3] = "Q40";
 
var arrSml_1_3 = new Array("");    // 스텔라
arrSml_1_3[0] = "";
arrSml_1_3[1] = "미등록";
 
var arrSml_2_1 = new Array("");    // SM5
arrSml_2_1[0] = "";
arrSml_2_1[1] = "SM525V";
arrSml_2_1[2] = "SM520SE";
 
var arrSml_3_1 = new Array("");    // 카렌스 II
arrSml_3_1[0] = "";
arrSml_3_1[1] = "미등록";
 
var arrSml_3_2 = new Array("");    // 옵티마
arrSml_3_2[0] = "";
arrSml_3_2[1] = "opt200";
 
function fnCateInit() {
    var arr1 = new Array();
    arr1[0]  = "<option value=''>=제조사=</option>";
    for (i=1; i<arrBig.length; i++) {
        arr1[i] = "<option value='"+ arrBig[i] +"'>"+ arrBig[i] +"</option>";
    }
 
    cate1.innerHTML = "<select name='cate1' onchange='fnCate2Chg()'>"+ arr1.join() +"</select>";
}
 
function fnCate2Chg() {
    var arr2 = new Array();
    var arr3 = new Array();
    var gap = document.fcate.cate1.options[document.fcate.cate1.selectedIndex].value;
    if (gap != "") {
        for (var i=1;i<arrBig.length;i++) {
            if (gap == arrBig[i]) {
                bigNum = i;
                break;
            }
        }
        arrMid = eval("arrMid_" + bigNum);
        for (var i=1;i<arrMid.length;i++) {
            arr2[i] = "<option value='"+ arrMid[i] +"'>"+ arrMid[i] +"</option>";
        }
        cate2.innerHTML = "<select name='cate2' onchange='fnCate3Chg()'>"+ arr2.join() +"</select>";
 
        arrSml = eval("arrSml_" + bigNum + "_1");
        for (var i=1;i<arrSml.length;i++) {
            arr3[i] = "<option value='"+ arrSml[i] +"'>"+ arrSml[i] +"</option>";
 
        }
        cate3.innerHTML = "<select name='cate3'>"+ arr3.join() +"</select>";
    } else {
        cate2.innerHTML = "<select name='cate2' onchange='fnCate3Chg()'><option value=''>=모델명=</option></select>";
        cate3.innerHTML = "<select name='cate3' ><option value=''>=등급명=</option></select>";
    }
}
 
function fnCate3Chg() {
    var arr2 = new Array();
    var arr3 = new Array();
    var gap1 = document.fcate.cate1.options[document.fcate.cate1.selectedIndex].value;
    var gap2 = document.fcate.cate2.options[document.fcate.cate2.selectedIndex].value;
    if (gap1 != "") {
        for (var i=1;i<arrBig.length;i++) {
            if (gap1 == arrBig[i]) {
                bigNum = i;
                break;
            }            
        }
        arrMid = eval("arrMid_" + bigNum);
        for (var i=1;i<arrMid.length;i++) {
            if (gap2 == arrMid[i]) {
                arr2[i] = "<option value='"+ arrMid[i] +"' selected>"+ arrMid[i] +"</option>";
            } else {
                arr2[i] = "<option value='"+ arrMid[i] +"'>"+ arrMid[i] +"</option>";                
            }
        }
        cate2.innerHTML = "<select name='cate2' onchange='fnCate3Chg()'>"+ arr2.join() +"</select>";
 
        for (var i=1;i<arrMid.length;i++) {
            if (gap2 == arrMid[i]) {
                midNum = i;
                break;
            }
        }
        arrSml = eval("arrSml_" + bigNum + "_" + midNum);
 
        for (var i=1;i<arrSml.length;i++) {
                arr3[i] = "<option value='"+ arrSml[i] +"'>"+ arrSml[i] +"</option>";
        }
 
        cate3.innerHTML = "<select name='cate3'>"+ arr3.join() +"</select>";
//        alert(cate3.innerHTML);
    } else {
        
        cate2.innerHTML = "<select name='cate2' ><option value=''>=모델명=</option></select>";
        cate3.innerHTML = "<select name='cate3' ><option value=''>=등급명=</option></select>";
    }
 
}
</script>
 
<body onload="fnCateInit();">
<form name="fcate" method="post">
 
카테고리 대 : <span id="cate1"></span> <br>
카테고리 중 : <span id="cate2"><Select name='cate2'><option value=''>=모델명=</option></select></span>
 
<br>
카테고리 소 : <span id="cate3"><Select name='cate3'><option value=''>=등급명=</option></select></span>
 
</form>
 
</body>