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> |
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
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 및...) | 황제낙엽 | 2005.10.20 | 26 |
73 | 링크모음 | 황제낙엽 | 2011.03.25 | 25 |
72 | YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 | 황제낙엽 | 2010.10.03 | 25 |
71 | 생성자 체인과 상속 | 황제낙엽 | 2008.08.08 | 24 |
70 | Date객체 - 날짜구하기 | 황제낙엽 | 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 | 동적인 언어를 동적으로 호출하기 | 황제낙엽 | 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 |