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

황제낙엽 2005.12.02 10:52 조회 수 : 768 추천:113

sitelink1  
sitelink2  
sitelink3  
sitelink4  
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>


이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
26 Page Refresh/Reload 황제낙엽 2007.08.24 884
25 Javascript 내장객체 String 황제낙엽 2007.04.10 1011
24 유용한 자바스크립트 예제 몇가지 (Tree 및...) file 황제낙엽 2005.10.20 830
23 자바 스크립트 플러그인 황제낙엽 2005.11.22 1065
22 JAVASCRIPT REFERENCE 파일 file 황제낙엽 2005.11.22 1158
21 JAVASCRIPT Debuger 프로그램 file 황제낙엽 2005.11.22 818
20 SelectBox 밑에 CheckBox가 포함된 리스트 만들기 file 황제낙엽 2007.01.16 1270
19 3시간 걸려서 만든 입력폼 자릿수체크 스크립트 황제낙엽 2006.04.22 1148
18 innerHTML 황제낙엽 2005.12.19 971
17 insertAdjacentHTML Method 황제낙엽 2005.12.19 3723
16 폼으로 XML 데이터 전송 (JSP+Javascript) 황제낙엽 2005.12.04 875
15 Methods and properties of Microsoft.XMLDOM 황제낙엽 2005.12.04 810
14 슬라이딩 메뉴 황제낙엽 2005.12.02 857
» XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 768
12 풍선 도움말 황제낙엽 2005.11.24 696
11 소스 보기 막기 황제낙엽 2005.11.18 991
10 카페의 회람 . 막기 소스 황제낙엽 2005.10.21 617
9 브라우저에서 뒤로 가기 막기와 펑션키(function key) 막기 황제낙엽 2005.10.21 1242
8 아이디 생성 조건 검사 자바스크립트 모듈 황제낙엽 2004.11.18 1092
7 마우스 오버시 살짝 뒤로 물러나는 듯한 링크 -_-;; 황제낙엽 2003.01.04 829
쓰기 태그