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; //그리고...비활성화
}
궁금한 점 있으시면 쪽지주세요...
댓글 없음:
댓글 쓰기