[자바스크립트+ASP] select 박스 선택하면 다음 select 박스 활성화

ASP 자바스크립트 select 박스 선택하면 다음 select 박스 활성화

 

예제 보기..

질문자인사 좋은 답변 감사합니다. 많은 도움이 되었습니다.

<select name="warea_big1" onChange="javascript:WorkAreaDetailWrite(1, this.value)">
        </select> →
     <script>
       WorkAreaBigWrite(1);
      </script>
  <select name="warea_detail1" onChange="javascript:DisableNext(1, false);CheckWorkArea(1)" disabled>
           <option value="0">1차 지역 세부선택</option>
                    </select><br>

   <select name="warea_big2" onChange="javascript:WorkAreaDetailWrite(2, this.value)" disabled>
                    </select> →
        <script>
           WorkAreaBigWrite(2);
         </script>
    <select name="warea_detail2" onChange="javascript:DisableNext(2, false);CheckWorkArea(2)" disabled>
           <option value="0">2차 지역 세부선택</option>
                    </select><br>

     <select name="warea_big3" onChange="javascript:WorkAreaDetailWrite(3, this.value)" disabled>
                    </select> →
         <script>
               WorkAreaBigWrite(3);
         </script>

.....

..

.

이런식으로 되어있는데 어떻게 <option>태그도 없이 디비에서 저런식으로 뿌려올수가있을지 신기할따름입니다.

다음  저 위에 있는소스에서 쓰인 각 자바스크립트 function 소스만 잘라서 올립니다. 이것도 다른두 페이지에서 나뉘어서 인클루드 돼어있네요..

우선 이건 디비에서 값을 가저오는거 같습니다.
// 국내지역 1차 지역선택
var work_area_big = new Array();
work_area_big[0] = new Array();
work_area_big[1] = new Array();
<%
sql = "select warea_code, warea_big from ListWorkArea where warea_code < " & local_count & "00"
RS1.Open(sql), DB
oldcode = 0

Do Until RS1.EOF
 wcode = Trim(RS1("warea_code").Value)
  wbigcode = Cint(Left(wcode, 2))
  wbig = Trim(RS1("warea_big").Value)
 if wbigcode <> oldcode then
%>
work_area_big[0].push("<%=wbigcode%>");
work_area_big[1].push("<%=wbig%>");
<%
 end if
 oldcode = wbigcode
  RS1.MoveNext
Loop
RS1.Close
%>

function WorkAreaBigWrite(sel)
{
 var lselect = eval("document.phistoryform.warea_big" + sel);
  var i = 0;
  var j = 0;
  lselect.options[j++] = new Option(sel + "차 지역선택", "0");
  for (i = 0; i < work_area_big[0].length; i++)
  {
    lselect.options[j++] = new Option(work_area_big[1][i], work_area_big[0][i]);

  }
}

// 국내지역 2차 지역선택
var work_area_detail = new Array();
<%
for wi = 0 to (local_count - 1)
%>
 work_area_detail[<%=wi%>] = new Array();
<%
next

sql = "select warea_code, warea_detail from ListWorkArea where warea_code < " & local_count & "00"
RS1.Open(sql), DB

Do Until RS1.EOF
 wcode = Trim(RS1("warea_code").Value)
  wbigcode = Cint(Left(wcode, 2))
  wdetail = Trim(RS1("warea_detail").Value)
%>
work_area_detail[<%=wbigcode%>].push("<%=wcode%>", "<%=wdetail%>");
<%
  RS1.MoveNext
Loop
RS1.Close
%>

--여기부터 function---

function WorkAreaDetailWrite(sel, grp)
{

 // sel은 select를 구분

 // grp는 option value값

 // sel값으로 object 생성

 var lselect = eval("document.phistoryform.warea_detail" + sel);

  //아래의 함수는 기존에 동적으로 생성했던 2차지역 option 모두 삭제

  jsSelectClear(lselect);
  var i = 0;
  var j = 0;
  lselect.options[j++] = new Option(sel + "차 지역 세부선택", "0");
  for (i = 0; i < work_area_detail[grp].length - 1; i+=2)
  {
    lselect.options[j++] = new Option(work_area_detail[grp][i + 1], work_area_detail[grp][i]);

    //이부분이 이 함수의 핵심이죠

    // 위의 select 문으로  조건에 만족하는 2차지역 값(지역코드, 지역텍스트)을 배열로 담고

    // 배열수 만큼 반복문을 돌리는 것입니다.

    // 서울을 선택했을 경우

    //work_area_big[1][i] 여기에는 강남구 ,강북구, 강서구...

   //work_area_big[0][i]) 여기에는 101, 102 ,103,.... 이렇게 값이 들어가있겠죠.

   // 여기서 동적으로  new Option 으로 새로운 옵션을  생성하는 것입니다.

   // 즉 for(i=0; i<배열수; i++) {

         //new Option(101, 강남구) == <option value=1>강남구</option>

         //new Option(102, 강북구) == <option value=2>강북구</option>
         //new Option(103, 강서구) == <option value=3>강서구</option>

    //}
  }

   //2차 select 활성화
  lselect.disabled = false;
}

function DisableNext(sel, bool)
{

 //n번째 카테고리 선택시 n번째 2차 select 활성화

 if (sel < 3) {
    var nextsel = sel + 1;
    var lselect = eval("document.phistoryform.warea_big" + nextsel);
    lselect.disabled = bool;

   }
}

// 근무지역 선택 체크
function CheckWorkArea(sel)
{ //이부분은 설명 안해도 될듯..^^ 걍 중복선택 체크 후 option삭제함수 호출 ==> 초기화

 var CurrLocal = eval("document.phistoryform.warea_detail" + sel).value;
 var CurrStart = CurrLocal.substring(0, 2);
  var CurrEnd = CurrLocal.substring(2, 4);
  var NumLocal;
  var NumStart;
  var NumEnd;
 for (var num = 1; num < 4; num++) {
  if ((sel != num) && (eval("document.phistoryform.warea_detail" + num).selectedIndex != 0)) {
      NumLocal = eval("document.phistoryform.warea_detail" + num).value;
      NumStart = NumLocal.substring(0, 2);
      NumEnd = NumLocal.substring(2, 4);
   if (NumLocal == CurrLocal) {
    alert("국내지역은 중복선택 하실 수 없습니다.");
        LocalAreaClear(sel);
        DisableNext(sel, true);
   }
      else if ((NumStart == CurrStart) && ((NumEnd == "00") || (CurrEnd == "00"))) {
    alert("해당지역 전체와 상세지역을 같이 선택하실 수 없습니다.");
         LocalAreaClear(sel);
        DisableNext(sel, true);
   }    
  }
 }
}

//option을 삭제하는 함수

function jsSelectClear(argObj) {

   for (i = argObj.length - 1; i >= 0; i--) {

    argObj.options[i] = null;

   }

   //argObj.options[2] = null;  //이렇게하면 3번째 옵션만 삭제됩니다.

}

function LocalAreaClear(num) {
 var big = eval("document.phistoryform.warea_big" + num);
 var detail = eval("document.phistoryform.warea_detail" + num);
 big.selectedIndex = 0; //초기화

 //option 삭제 함수 호출
 jsSelectClear(detail);

//2차 지역 첫번째 아들놈은 남겨놓아야 하니까.^^
 detail.options[0] = new Option(num + "차 지역 세부선택", '0');
  detail.disabled = true; //그리고...비활성화

}

궁금한 점 있으시면 쪽지주세요...