묻고답하기

구조는 1단계 셀렉트값 선택시 2단계옵션리스트가 올라오고
2단계 선택시 3단계옵션리스트가 올라오고
3단계 선택시 3단계옵션리스트가 올라오는 방식입니다.

질문:
1단계 셀렉트값 누를경우 2단계가 나오는데 3단계를 초기화 할수 있는 방법이 없나요?
맨 처음누를때는 순차적으로 잘 작동되는데
4단계까지선택하고 다시 1단계를 누르면 3단계, 4단계 셀렉트값은 이전값 그대로 가지고 있습니다.

즉 1단계 누를때 3, 4단계값 초기화
2단계 누를때 4단계값 초기화 할수 있는 방법을 묻는겁니다.
이 소스는 FirstListItem 이라는 단어를 구글에서 찿아 보면 많이 나오는 소스 입니다.
물론 이소스의 DB 연동은 되어 있지 않고 , 제 개인소스는 되어 있죠.
좋은 하루 되세요.

<script lanuage=javascript>
var FirstList = new Array(2);;
var SecondList = new Array(4);;
var ThirdList = new Array(12);;
var ForthList = new Array(26);;
var nvalue;
var description;


function FirstListItem(nvalue, description) {
    this.nvalue = nvalue;
    this.description = description;
}

function SecondListItem(category,nvalue,description) {
    this.category = category;
    this.nvalue = nvalue;
    this.description = description;
}


function ThirdListItem(category,nvalue,description) {
    this.category = category;
    this.nvalue = nvalue;
    this.description = description;
}


function ThirdListItem(category,category1,nvalue,description) {
    this.category = category;
    this.category1 = category1;
    this.nvalue = nvalue;
    this.description = description;
}

function ForthListItem(category,category1,category2,nvalue,description) {
    this.category = category;
    this.category1 = category1;
    this.category2 = category2;
    this.nvalue = nvalue;
    this.description = description;
}

function prepareData(){

    FirstList[0] = new FirstListItem(0,"매입");
    FirstList[1] = new FirstListItem(1,"매출");
    
    SecondList[0] = new SecondListItem(0,0,"일반매입");
    SecondList[1] = new SecondListItem(0,1,"고정자산매입");
    SecondList[2] = new SecondListItem(1,0,"신고기간분");
    SecondList[3] = new SecondListItem(1,1,"예정누락분");
    SecondList[4] = new SecondListItem(1,2,"예정누락분2");

    ThirdList[0]  = new ThirdListItem(0,0,0,"공제세액");
    ThirdList[1]  = new ThirdListItem(0,0,1,"불공제세액");
    ThirdList[2]  = new ThirdListItem(0,0,2,"계산서");
    ThirdList[3]  = new ThirdListItem(0,0,3,"누락분공제");
    ThirdList[3]  = new ThirdListItem(0,0,4,"누락분공제");
    ThirdList[4]  = new ThirdListItem(0,1,0,"공제세액");
    ThirdList[5]  = new ThirdListItem(0,1,1,"불공정세액");
    ThirdList[6]  = new ThirdListItem(0,1,2,"계산서");
    ThirdList[7]  = new ThirdListItem(0,1,3,"누락분공제");
    ThirdList[8]  = new ThirdListItem(1,0,0,"세금계산서");
    ThirdList[9]  = new ThirdListItem(1,0,1,"기타분");
    ThirdList[10] = new ThirdListItem(1,1,0,"세금계산서");
    ThirdList[11] = new ThirdListItem(1,1,1,"기타분");
    ThirdList[12] = new ThirdListItem(1,1,2,"기타분2");

    ForthList[0]  = new ForthListItem(0,0,0,0,"세금계산서");
    ForthList[1]  = new ForthListItem(0,0,1,0,"비영업용소형승용차");
    ForthList[2]  = new ForthListItem(0,0,1,1,"접대관련매입세액");
    ForthList[3]  = new ForthListItem(0,0,1,2,"필요적기재사항누락");
    ForthList[4]  = new ForthListItem(0,0,1,3,"영수증");
    ForthList[5]  = new ForthListItem(0,0,2,0,"해당없음");
    ForthList[6]  = new ForthListItem(0,0,3,0,"세금계산서");
    ForthList[7]  = new ForthListItem(0,1,0,0,"세금계산서");
    ForthList[8]  = new ForthListItem(0,1,1,0,"비영업용소형승용차");
    ForthList[9]  = new ForthListItem(0,1,1,1,"접대관련매입세액");
    ForthList[10] = new ForthListItem(0,1,1,2,"필요적기재사항누락");
    ForthList[11] = new ForthListItem(0,1,1,3,"영수증");
    ForthList[12] = new ForthListItem(0,1,2,0,"해당없음");
    ForthList[13] = new ForthListItem(0,1,3,0,"세금계산서");
    ForthList[14] = new ForthListItem(1,0,0,0,"세금계산서");
    ForthList[15] = new ForthListItem(1,0,0,1,"고정자산매각");
    ForthList[16] = new ForthListItem(1,0,1,0,"영수증");
    ForthList[17] = new ForthListItem(1,0,1,1,"금전등록기");
    ForthList[18] = new ForthListItem(1,0,1,2,"카드판매");
    ForthList[19] = new ForthListItem(1,0,1,3,"고정자산매각");
    ForthList[20] = new ForthListItem(1,1,0,0,"세금계산서");
    ForthList[21] = new ForthListItem(1,1,0,1,"고정자산매각");
    ForthList[22] = new ForthListItem(1,1,1,0,"영수증");
    ForthList[23] = new ForthListItem(1,1,1,1,"금전등록기");
    ForthList[24] = new ForthListItem(1,1,1,2,"카드판매");
    ForthList[25] = new ForthListItem(1,1,1,3,"고정자산매각");
}


function reFillList(){
    var selValue;
    var nOption;
    selValue = admin.slipcls.value;
    admin.gubun1.length = 0;
//  admin.gubun2.length = 0;
//  admin.gubun3.length = 0;
    for(var i=0; i<SecondList.length;i++){
        if(SecondList[i].category == selValue) {
            nOption = admin.gubun1.length;
            if( selValue == ""){
                nvalue = "";
            }else{
                admin.gubun1.options[nOption] = new Option(SecondList[i].description,SecondList[i].nvalue);
            }
        }
    }
    //alert("testing gubun1 : " + admin.gubun1.options[0].value);

//options[0].selected=true 이면 첫번째거 무조건 선택
//c2는 앞에서 받아온 값
/*
    if(c2 != ""){//수정할때 필요한 값, 2번째 값을 뿌려준다.
        admin.gubun1.options[c2].selected=true;
    }else{
        admin.gubun1.options[0].selected=true;
    }
*/

}

function reFillList1() {
    var selValue;
    var nOption;
    var selValue1;
    var nOption1;
    selValue = admin.slipcls.value;
    selValue1 = admin.gubun1.value;
//  admin.gubun1.length = 0;
    admin.gubun2.length = 0;
//  admin.gubun3.length = 0;

  for(var i=0; i<ThirdList.length;i++){
    if( ThirdList[i].category1 == selValue1 && ThirdList[i].category==selValue) {
        nOption1 = admin.gubun2.length;
            if( selValue == ""){
                nvalue = "";
            }else{
              admin.gubun2.options[nOption1] = new Option(ThirdList[i].description,ThirdList[i].nvalue);  
            }
    }
  }
/*
    if(c2 != ""){ //수정할때 필요한 값, 3번째 값을 뿌려준다.
        admin.gubun2.options[c2].selected=true;
    }else{
        admin.gubun2.options[0].selected=true;
    }
*/
}

function reFillList2(){
    var selValue;
    var selValue1;
    var selValue2;
    var nOption;
    var nOption1;
    var nOption2;
    selValue = admin.slipcls.value;
    selValue1 = admin.gubun1.value;
    selValue2 = admin.gubun2.value;
//  admin.gubun1.length = 0;
//  admin.gubun2.length = 0;
    admin.gubun3.length = 0;
    for(var i=0; i<ForthList.length;i++){
        if(ForthList[i].category2 == selValue2 && ForthList[i].category1==selValue1 && ForthList[i].category==selValue) {
            nOption2 = admin.gubun3.length;
            if( selValue == ""){
                nvalue = "";
            }else{
              admin.gubun3.options[nOption2] = new Option(ForthList[i].description,ForthList[i].nvalue);  
            }
        }
    }
//  admin.gubun3.options[0].selected=true;
}



//---------------------------------------------------------------------------
    var trNormal = "";

function revcheck(theform)
{
    
    for( var i=0; i< document.admin.elements.length; i++) {
        var ele = document.admin.elements[i];
        if(ele.name == 'check')
            ele.checked = !ele.checked;
    }
    return;
}

function allcheck(theform)
{
    for( var i=0; i< document.admin.elements.length; i++) {
        var ele = document.admin.elements[i];
        if ( -1 != ele.name.search(/check/) )
            ele.checked = true;
    }
    return;
}

function discheck(theform)
{
    for( var i=0; i<document.admin.elements.length; i++) {
        var ele = document.admin.elements[i];
        found = ele.name.match(/check*/);
        if( found != null )
            ele.checked = false;
    }
    return;
}

</script>


<body>
<form name="admin">
<tr>
    <td>
1
    <script language=javascript>
    var page="";
    var i;
    prepareData();
    page += "<select name='slipcls'  size='10'  onChange='reFillList();'>";
    for ( i=0; i<FirstList.length;i++) {
        page +="<option value='" + FirstList[i].nvalue + "'";
        if (i==0) {
            page += " selected";
        }
        page += ">"+FirstList[i].description;
    }
    page+="</select>";
    document.write(page);
    </script>  

2
    <select name='gubun1' size="10"  onChange='reFillList1()'>
    <option value="" selected>---------------------</option>
    <SCRIPT LANGUAGE=javascript>
    reFillList();
    </script>
    </select>  

3
    <select name='gubun2' size="10"  onChange='reFillList2()'>
    <option value="" selected>---------------------</option>
    <SCRIPT LANGUAGE=javascript>
    reFillList1();
    </script>
    </select>  

4
    <select name='gubun3' size="10" >
    <SCRIPT LANGUAGE=javascript>
    reFillList2();
    </script>
    </select></td></tr>
</form>    
</body>
</html>