웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
XML+JS 연동 다중셀렉트
2004.02.16 04:01
--------------------------------------------------------------------------------------
| JS+XML 연동 | Iframe+DB연동
--------------------------------------------------------------------------------------
로딩회수 | 1 | 주(대분류)셀렉트메뉴 를 선택할때마다 iframe을 리프래쉬
연동데이터 | XML | DB,파일DB
파싱여부 | 클라이언트에서 로딩후 바로 출력 | 파일DB일 경우 필요..
--------------------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////
themecate.xml 파일
//////////////////////////////////////////////////////////////////////////////
<?xml version="1.0" encoding="euc-kr"?>
<root>
<index code="A" text="게임">
<itemA code="AA" text="온라인 게임" />
<itemA code="AB" text="비디오 게임" />
<itemA code="AC" text="PC 게임" />
<itemA code="AD" text="게임 매거진"/>
<itemA code="AE" text="일반 게임" />
</index>
<index code="B" text="만화/애니">
<itemB code="BA" text="일본만화/애니" />
<itemB code="BB" text="한국만화/애니" />
<itemB code="BC" text="순정" />
<itemB code="BD" text="무협" />
<itemB code="BE" text="코믹" />
<itemB code="BF" text="작가" />
<itemB code="BG" text="창작" />
<itemB code="BH" text="만화일반" />
</index>
</root>
//////////////////////////////////////////////////////////////////////////////
0070.HTM 파일
//////////////////////////////////////////////////////////////////////////////
<SCRIPT LANGUAGE="JavaScript">
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
//셀렉트 DB 로드
xmlDoc.load("../themecate.xml");
function themeCate_Load(){
//대분류 인덱스 값 정리하기
cnt=xmlDoc.getElementsByTagName("index").length;
this.text=new Array(cnt);
this.code=new Array(cnt);
for(i=0;i<cnt;i++){
this.code[i]=xmlDoc.getElementsByTagName("index/@code").item(i).text;
this.text[i]=xmlDoc.getElementsByTagName("index/@text").item(i).text;
}
}
//대분류 카테리스트 출력
function themeCate_List()
{
//대분류 리스트 객체 반환
themeSel=new themeCate_Load();
cnt=themeSel.code.length;
for(i=0;i<cnt;i++){
selCnt=opt.options.length;opt.options.length++;
opt.options[selCnt].text=themeSel.text[i];
opt.options[selCnt].value=themeSel.code[i];
}
}
//소분류 셀렉트 출력
function themeCate_Change(t)
{
//이전 소분류셀렉 초기화
opt2.options.length=1;
//선택된 대분류의 코드값을 가진 소분류 리스트를 가져온다.
sel=t.selectedIndex;
code=t.options[sel].value;
tree=xmlDoc.getElementsByTagName("item"+code+"/@text");
cnt=tree.length-1;
for(i=0;i<=cnt;i++){
selCnt=opt2.options.length++;
opt2.options[selCnt].text=tree.item(i).text;
}
}
</SCRIPT>
<!--대분류셀렉트-->
<select name="opt" onchange="themeCate_Change(this)">
<option>--대분류--</option>
</select>
<!--소분류셀렉트-->
<select name="opt2">
<option>--소분류--</option>
</select>
<!--대분류셀렉트 목록 출력-->
<script>themeCate_List()</script>
---------------------------------------------------------------------------------------------------
XML 트리구조
작성방법은 HTML과 비슷하나 태그를 임의로 생성 가능합니다.
단 </iframe></html>처럼 끝나는지 않는 <br> 같은 단독태그들은
<br /> 처럼 태그뒤에 공백과 / 를 포함해야합니다. 그리고 태그안에
어트리뷰트(속성) 값들은 반드시 "으로시작해서 "으로 끝나야합니다
<index code="A" text="언어/글자">
<itemA text="가나다라마바사" />
<itemA text="ABCDEF" />
</index>
<index code="B" text="게시판">
<itemB text="제로보드" />
<itemB text="미니보드" />
</index>
jueyini.com,jueyini@jueyini.com
새로운 스무살 ..!! 열정,슬픔,기쁨
그리고 ..♡.. 사랑의 시작이다...!!
| JS+XML 연동 | Iframe+DB연동
--------------------------------------------------------------------------------------
로딩회수 | 1 | 주(대분류)셀렉트메뉴 를 선택할때마다 iframe을 리프래쉬
연동데이터 | XML | DB,파일DB
파싱여부 | 클라이언트에서 로딩후 바로 출력 | 파일DB일 경우 필요..
--------------------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////
themecate.xml 파일
//////////////////////////////////////////////////////////////////////////////
<?xml version="1.0" encoding="euc-kr"?>
<root>
<index code="A" text="게임">
<itemA code="AA" text="온라인 게임" />
<itemA code="AB" text="비디오 게임" />
<itemA code="AC" text="PC 게임" />
<itemA code="AD" text="게임 매거진"/>
<itemA code="AE" text="일반 게임" />
</index>
<index code="B" text="만화/애니">
<itemB code="BA" text="일본만화/애니" />
<itemB code="BB" text="한국만화/애니" />
<itemB code="BC" text="순정" />
<itemB code="BD" text="무협" />
<itemB code="BE" text="코믹" />
<itemB code="BF" text="작가" />
<itemB code="BG" text="창작" />
<itemB code="BH" text="만화일반" />
</index>
</root>
//////////////////////////////////////////////////////////////////////////////
0070.HTM 파일
//////////////////////////////////////////////////////////////////////////////
<SCRIPT LANGUAGE="JavaScript">
var xmlDoc;
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
//셀렉트 DB 로드
xmlDoc.load("../themecate.xml");
function themeCate_Load(){
//대분류 인덱스 값 정리하기
cnt=xmlDoc.getElementsByTagName("index").length;
this.text=new Array(cnt);
this.code=new Array(cnt);
for(i=0;i<cnt;i++){
this.code[i]=xmlDoc.getElementsByTagName("index/@code").item(i).text;
this.text[i]=xmlDoc.getElementsByTagName("index/@text").item(i).text;
}
}
//대분류 카테리스트 출력
function themeCate_List()
{
//대분류 리스트 객체 반환
themeSel=new themeCate_Load();
cnt=themeSel.code.length;
for(i=0;i<cnt;i++){
selCnt=opt.options.length;opt.options.length++;
opt.options[selCnt].text=themeSel.text[i];
opt.options[selCnt].value=themeSel.code[i];
}
}
//소분류 셀렉트 출력
function themeCate_Change(t)
{
//이전 소분류셀렉 초기화
opt2.options.length=1;
//선택된 대분류의 코드값을 가진 소분류 리스트를 가져온다.
sel=t.selectedIndex;
code=t.options[sel].value;
tree=xmlDoc.getElementsByTagName("item"+code+"/@text");
cnt=tree.length-1;
for(i=0;i<=cnt;i++){
selCnt=opt2.options.length++;
opt2.options[selCnt].text=tree.item(i).text;
}
}
</SCRIPT>
<!--대분류셀렉트-->
<select name="opt" onchange="themeCate_Change(this)">
<option>--대분류--</option>
</select>
<!--소분류셀렉트-->
<select name="opt2">
<option>--소분류--</option>
</select>
<!--대분류셀렉트 목록 출력-->
<script>themeCate_List()</script>
---------------------------------------------------------------------------------------------------
XML 트리구조
작성방법은 HTML과 비슷하나 태그를 임의로 생성 가능합니다.
단 </iframe></html>처럼 끝나는지 않는 <br> 같은 단독태그들은
<br /> 처럼 태그뒤에 공백과 / 를 포함해야합니다. 그리고 태그안에
어트리뷰트(속성) 값들은 반드시 "으로시작해서 "으로 끝나야합니다
<index code="A" text="언어/글자">
<itemA text="가나다라마바사" />
<itemA text="ABCDEF" />
</index>
<index code="B" text="게시판">
<itemB text="제로보드" />
<itemB text="미니보드" />
</index>
jueyini.com,jueyini@jueyini.com
새로운 스무살 ..!! 열정,슬픔,기쁨
그리고 ..♡.. 사랑의 시작이다...!!
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
NZEO의 좌측 이동메뉴를 구현해 보자. (이동 On/Off 기능 포함) [43] | steelheart | 2002.08.20 |
★랜덤으로 음악 재생하기★ [23] | 뽀유♡ | 2002.08.16 |
개판 오분전 브레인 써바이벌 [19] | 미친개 | 2002.08.14 |
[로그인] 자바스크립트로 여러개 로그인하기 [10] | ZipShin | 2002.08.13 |
랜덤으로 바뀌는 배경이미지 [11] | ZipShin | 2002.08.13 |
랜덤으로 배경음악 지정하기. [5] | ZipShin | 2002.08.13 |
요일마다 지정된 태그 나타나게 하기 [1] | Eccen | 2002.08.13 |
허접 자바스크립트강의 - 4 - [8] | 홍윤식 | 2002.08.10 |
개판 오분전 칼라팔레트 [5] | 미친개 | 2002.08.08 |
허접 자바스크립트 강의 - 3 - [6] | 홍윤식 | 2002.07.31 |
허접 자바 스크립트 강의 - 2 - [13] | 홍윤식 | 2002.07.29 |
허접 자바 스크립트 -1- [6] | 홍윤식 | 2002.07.27 |
ZipShin이 사용하는 한링크에 두프레임 움직이기..^^ [14] | ZipShin | 2002.08.03 |
iFrame 문서크기에 맞게.. 초간단.. [10] | 정명주 | 2002.08.02 |
링크에 포커스 없애기 II [6] | steelheart | 2002.08.02 |
아이프레임을 내용에 따라 크기(폭,높이) 바꿔주는 스크립트 [9] | 민이 | 2002.08.01 |
[Siren]타이틀 글씨가 움직인다! (상태바아님) [4] | 세이렌 | 2002.07.31 |
^^ 공포의 숫자맞추기 ^^ [17] | BULGOM | 2002.07.30 |
도깨비불을 아시나요 [5] | 세벌사랑 | 2002.07.30 |
[초보자] 상태바에 글 나타내기 [2] | ZipShin | 2002.07.30 |