자바스크립트 동적 셀렉트박스
페이지 정보
작성자 서방님 댓글 1건 조회 97회 작성일 07-07-31 18:45본문
<%'DB 연결%>
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE><%=strTopTitle%></TITLE>
<meta http-equiv=Cache-Control content=No-Cache>
<meta http-equiv=Pragma content=No-Cache>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="HyungE">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<LINK href="<%=strWebURL%>/include/default.css" type=text/css rel=stylesheet>
</Head>
</Body>
<form name ="productinfo">
<font size = 2 color = "red"><strong>이벤트 선택</strong></font> :
<select name="cate1" onChange="javascript:selectcate2(this.value)">
<option value="" selected>이벤트 선택</option>
<%
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' 이벤트 카테고리는 그냥 단순하게 쿼리문을 이용해 뿌려줌
set oRec = Server.CreateObject("ADODB.Recordset")
strSQL = ""
strSQL = "select EICode, EIName, case when EISatus = 9 then '진행' when EISatus = 2 then '예정' when EISatus = 0 then '지난' else '기타' + convert(varchar(11), EISatus) end from EventInfos order by EISatus desc, EICode desc"
oRec.Open strSQL, oCon, 3, 1
DO While Not oRec.EOF
leng = Len(oRec(1))
If Clng(leng) < 9 Then
title = Mid(oRec(1),1,8)
Etitle = title
Else
title = Mid(oRec(1),1,13)
Etitle = title & "..."
End If
state = "(" & oRec(2) & ")"
Eventtitle = state & Etitle
EIcode = oRec(0)
Response.Write "<option value='"&EIcode&"'>"&Eventtitle&"</option>"
oRec.MoveNext
loop
set oRec = Nothing
%>
</select><br>
<font size = 2 color = "red"><strong>이벤트서브 선택</strong></font> :
<select id="cate_2" name="cate2">
<option value="" selected>이벤트서브 선택</option>
</select>
<%
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' 일단 모든 2차 카테고리의 갯수와 정보를 가져옴.
set oRec = Server.CreateObject("ADODB.Recordset")
strSQL = ""
strSQL = "select count(ESCode) from EventSub"
oRec.Open strSQL, oCon, 3, 1
cnt = oRec(0)
set oRec = Nothing
set oRec = Server.CreateObject("ADODB.Recordset")
strSQL = ""
strSQL = "select ESCode, ESName, ESEICode from EventSub order by ESCode desc"
oRec.Open strSQL, oCon, 3, 1
folder = oRec.GetRows
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' 위에서 뽑아온 레코드셋을 2차원배열로 바꾼 다음에... '
' 아래의 룹을 이용해 자바스크립트의 2차원 배열선언 형식으로 '
' 스트링변수에 집어 넣음. '
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
strfolder = "folder = new Array()" & chr(13) & chr(9)
for i=0 to cnt - 1
strfolder = strfolder & "folder["&i&"] = new Array()" & chr(13) & chr(9)
strfolder = strfolder & "folder["&i&"][0] = '"&folder(0,i)&"';"
strfolder = strfolder & "folder["&i&"][1] = '"&folder(1,i)&"';"
strfolder = strfolder & "folder["&i&"][2] = '"&folder(2,i)&"';" & chr(13) & chr(9)
next
set oRec = Nothing
%>
<script language=javascript>
function selectcate2(value)
{
// 위에서 저장했던 2차카테고리의 갯수와 배열선언 스트링을 자바스크립트의 함수 안에서 뿌려줍니다.
var cnt = <%=cnt%>;
var a = 1;
<%=strfolder%>
// 함수가 호출되면 첫번째 for문에서 기존의 2차카테고리 부분의 옵션리스트를 모두 삭제하고
// 두번째 for문에서 새로 바뀐 1차카테고리의 하위 2차카테고리를 집어 넣게 됩니다.
len = document.productinfo.cate2.options.length;
for(i=0; i < len; i++)
{
document.productinfo.cate2.options[1] = null;
}
for(i=0; i < cnt;i++)
{
if (value == folder[i][2])
{
document.productinfo.cate2.options[a++] = new Option(folder[i][1], folder[i][0]);
}
}
}
</script>
</body>
</html>
출처 : 태오닷넷
손좀 봤다. 사실 오늘 하루 종일 걸려서 동적 셀렉트 박스란걸 드디어 해결함 ㅠㅠ
괜한 고집이었지. 큭큭
저 셀렉트 박스 2개는 리로드하지않고서
셀렉트 박스 1에 해당되는 카테고리 선택시 그하위값이 셀렉트 박스 2에서 자동으로 변하는 그런것이다.
역시 난감한 자바스크립트..
댓글목록
등록된 댓글이 없습니다.
