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

황제낙엽 2005.12.02 10:52 조회 수 : 23 추천: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>


이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
77 [펌] TAEYO.NET - JavaScript OOP 스트레칭 황제낙엽 2009.04.02 27
76 Rhino scopes and contexts 에 대한 문서 황제낙엽 2008.07.18 27
75 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 26
74 유용한 자바스크립트 예제 몇가지 (Tree 및...) file 황제낙엽 2005.10.20 26
73 링크모음 황제낙엽 2011.03.25 25
72 YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 황제낙엽 2010.10.03 25
71 생성자 체인과 상속 황제낙엽 2008.08.08 24
70 Date객체 - 날짜구하기 file 황제낙엽 2008.02.19 24
69 CORS(Cross-Origin Resource Sharing) - 2 황제낙엽 2017.03.07 24
68 연산자 this 황제낙엽 2014.12.30 23
67 URI 인코딩을 해야 하는 문자들 황제낙엽 2009.09.02 23
66 [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype 황제낙엽 2009.04.02 23
65 String xml 파싱 황제낙엽 2008.11.03 23
» XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 23
63 파이어폭스로 스크립트 디버깅하기 황제낙엽 2009.01.14 22
62 동적인 언어를 동적으로 호출하기 file 황제낙엽 2008.07.14 22
61 [펌] TAEYO.NET - JavaScript OOP 코어객체와 prototype를 사용한 객체확장 황제낙엽 2009.04.02 21
60 Object 와 Prototype 황제낙엽 2008.08.08 21
59 [펌]자바스크립트에서 객체 생성 방법 황제낙엽 2008.08.07 21
58 감추기, 보이기 화면 예제 황제낙엽 2008.04.14 21
쓰기 태그