일반 XML+JS 연동 다중셀렉트박스 (1) - [AJAX] <font color="brown">(MS Explorer 전용)</brown>

황제낙엽 2005.12.02 10:52 조회 수 : 208 추천:101

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
http://myhome.gimhae.go.kr/cugain/cugain_pds/cugain_board_javadata/javascript/composite_selectbox/composite_selectbox.htmlhttp://myhome.gimhae.go.kr/cugain/cugain_pds/cugain_board_javadata/javascript/composite_selectbox/composite_selectbox.zip
링크1 : 소스 다운로드
링크2 : 예제 보기

--------------------------------------------------------------------------------------
                 |    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>


이 게시물을
목록
쓰기 태그