다중 셀렉트(select) 박스 3
인터넷정보2007. 10. 18. 13:42
- <FORM name='ff2' METHOD=POST ACTION="">
- <SELECT NAME="ss1" size=1 onChange='init_list("ff2","ss1","ss2","ss3",1)'>
- <option value='0'>대분류</option>
- </SELECT>
- <SELECT NAME="ss2" size=1 onChange='init_list("ff2","ss1","ss2","ss3",2)'>
- <option >중분류</option>
- </SELECT>
- <SELECT NAME="ss3" size=1>
- <option >소분류</option>
- </SELECT>
- </FORM>
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- /////////////////////////////// 대분류 배열
- // Ccode = new Array();
- // Cname = new Array();
- Ccode = ["0","11","12"]
- Cname = ["대분류","비지니스/경제","컴퓨터/인터넷"]
- ////////////////////////////// 중분류 배열
- Ccode11 = ["0","1111","1112","1113"]
- Cname11 = ["중분류","경제1","경제2","경제3"]
- Cflag11 = ["0","0","1","1"]
- Ccode12 = ["0","1211","1212","1213"]
- Cname12 = ["중분류","운영체제","컴퓨터활용","소프트웨어"]
- ///////////////////////////// 소분류 배열
- Ccode1111 = ["0","111111","111112","111113"]
- Cname1111 = ["소분류","경제소1","경제소2","경제소3"]
- Ccode1112 = ["0","111111","111112","111113"]
- Cname1112 = ["소분류","경제소221","경제소222","경제소223"]
- Ccode1211 = ["0","111111","111112","111113"]
- Cname1211 = ["소분류","윈도우소1","리눅스소2","유닉스소3"]
- Ccode1212 = ["0","111111","111112","111113"]
- Cname1212 = ["소분류","윈도우소2221","리눅스소2222","유닉스2223"]
- //////////////////////////////////////////////
- // ff - 폼이름
- // ss1 - 대분류 셀렉트박스 이름
- // ss2 - 중분류 셀렉트박스 이름
- // ss3 - 소분류 셀렉트박스 이름
- // gubun - 대분류에서 온 값인지 소분류에서 온 값인지 여부
- ////////////////////////////////////////////////
- function init_list(Pform,Pss1,Pss2,Pss3,gubun) {
- FS1 = eval(Pform + "." + Pss1)
- FS2 = eval(Pform + "." + Pss2)
- FS3 = eval(Pform + "." + Pss3)
- switch(gubun) {
- case 1 :
- // 대분류값이 변하였을 경우
- if(FS1.options[FS1.selectedIndex].value != 0 ) {
- MCcode = eval( "Ccode" + FS1.options[FS1.selectedIndex].value )
- MCname = eval( "Cname" + FS1.options[FS1.selectedIndex].value )
- FS2.options.length = Ccode.length
- for(i=0 ; i < Ccode.length ; i++) {
- FS2.options[i].value = MCcode[i]
- FS2.options[i].text = MCname[i]
- }
- } else {
- FS2.options.length = 1
- FS2.options[0].value = "0"
- FS2.options[0].text = "중분류"
- }
- break ;
- case 2 :
- // 중분류값이 변하였을 경우
- if(FS2.options[FS2.selectedIndex].value != 0 ) {
- SCcode = eval( "Ccode" + FS2.options[FS2.selectedIndex].value )
- SCname = eval( "Cname" + FS2.options[FS2.selectedIndex].value )
- FS3.options.length = Ccode.length
- for(i=0 ; i < Ccode.length ; i++) {
- FS3.options[i].value = SCcode[i]
- FS3.options[i].text = SCname[i]
- }
- } else {
- FS3.options.length = 1
- FS3.options[0].value = "0"
- FS3.options[0].text = "소분류"
- }
- break ;
- default :
- // 초기화 기본값
- FS1.options.length = Ccode.length
- for(i=0 ; i < Ccode.length ; i++) {
- FS1.options[i].value = Ccode[i]
- FS1.options[i].text = Cname[i]
- }
- break ;
- }
- }
- init_list("ff2","ss1","ss2","ss3",0) ;
- //-->
- </SCRIPT>
'인터넷정보' 카테고리의 다른 글
자바스크립트와 테이터베이스 연동 (0) | 2007.10.18 |
---|---|
TextField의 Align - 텍스트 정렬 및 콤마 찍기 (0) | 2007.10.18 |
텍스트 애니메이션 (0) | 2007.10.18 |
웹페이지 대화상자 (부모창 위에 새창이 항상 최상위에 존재) (0) | 2007.10.18 |
input 또는 폼안의 포커스 이동 및 글자 길이 제한 (0) | 2007.10.18 |
이미지 슬라이드 (0) | 2007.10.18 |
체크박스 전체선택 / 전체해제 (0) | 2007.10.18 |
매월 마지막 날자 구하기 (0) | 2007.10.18 |
마우스 좌표값 (0) | 2007.10.18 |
문서길이를 자동으로 맞추는 아이프레임 리사이즈 소스 6가지 (0) | 2007.10.18 |
다중 셀렉트(select) 박스 2
인터넷정보2007. 10. 18. 13:41
- <style type=text/css>
- select {font-size:9pt;font-family:굴림;}
- </style>
- </head>
- <body bgcolor=white text=black link=blue vlink=purple alink=red>
- <table align=center>
- <form name=form method=POST action="">
- <tr>
- <td>
- <select name="high_cg" size="1" onchange="changeCG(document.form.high_cg)"></select>
- <select name="mid_cg" size="1">
- <option value="중분류">중분류</option>
- </select>
- </td>
- </form>
- <script language="JavaScript">
- <!-- JavaScript
- midCG = new Array(20);
- midCG[0] = "";
- midCG[1] = new Array("TV","라디오","인터넷방송","신문","웹진","잡지","각종 통계","쿨사이트");
- midCG[2] = new Array("영화","연극/음악","만화-애니메이션","문학","연예","유머-재미","게임");
- midCG[3] = new Array("공연예술","공예","디자인","박물관,화랑","예술가"," 전통예술");
- midCG[4] = new Array("정부기관","정치","법","군대","대사관","시민단체");
- midCG[5] = new Array("사람들","사회이슈","문화","기관-단체","환경-자연","식음료","동호회");
- midCG[6] = new Array("회사","광고","투자-재테크","금융","증권","보험","부동산","취업-채용","창업");
- midCG[7] = new Array("쇼핑몰"," 경매","공동구매 ","가격비교","소비자평가");
- midCG[8] = new Array("무료정보","무료다운","이벤트-경품 소개");
- midCG[9] = new Array("하드웨어","소프트웨어","프로그래밍 언어","멀티미디어","게임","보안과 암호","인터넷종합","채팅","통신-네트워크","OS");
- midCG[10] = new Array("패션","미용","가족","결혼","육아","다이어트","인테리어");
- midCG[11] = new Array("여행-관광","취미","레저","자동차","게임");
- midCG[12] = new Array("실내스포츠","실외스포츠","스포츠스타","스포츠관련 미디어","스포츠종합");
- midCG[13] = new Array("인문과학","사회과학","자연과학","공학");
- midCG[14] = new Array("건강일반","병원","의학정보","한의학","의료상담","다이어트");
- midCG[15] = new Array("교육일반","학교","선생님","기관-단체","온라인교육","시험-자격증");
- midCG[16] = new Array("유학","도서관","전문가서비스");
- midCG[17] = new Array("학과","동아리","학생회","동문-동창회","연구소","소모임");
- midCG[17] = new Array("기독교","천주교","불교","민족종교","기타");
- midCG[18] = new Array("가수","탤런트","개그맨","영화배우","모델","스포츠스타","순수예술인");
- midCG[19] = new Array("기업","사람","기타");
- listHighCG = new Array("대분류 선택","뉴스-미디어","엔터테이먼트","예술","정치 및 법","사회문화","경제","쇼핑","공짜&무료","컴퓨터,인터넷","가정-여성","레크리에이션","스포츠","학문-과학","건강-의학","교육","학교","종교","팬클럽","안티사이트");
- highSelect = document.form.high_cg;
- midSelect = document.form.mid_cg;
- function strPos(s, s1)
- {
- if(s1 == null) return;
- for(i=0; i<s.length; i++)
- {
- if(s[i] == s1) return i;
- }
- return -1;
- }
- function setMidCG(high_cg,mid_cg)
- {
- var num = midSelect.length;
- for(i=0; i<num; i++)
- {
- midSelect.options[1]= null;
- }
- midSelect.options[0] = new Option("중분류 선택","");
- for(var i=0; i<midCG[high_cg].length; i++)
- {
- var myitem = new Option(midCG[high_cg][i])
- midSelect.options[i+1] = myitem;
- }
- if(mid_cg > 0)
- {
- midSelect.options.selectedIndex = mid_cg;
- }
- }
- function changeCG(menu)
- {
- selectNum = menu.selectedIndex;
- setMidCG(selectNum,0);
- }
- function init()
- {
- for(var i=0; i<listHighCG.length; i++)
- {
- var item = new Option(listHighCG[i])
- highSelect.options[i] = item;
- }
- pos = strPos(listHighCG,"컴퓨터,인터넷");
- if(pos < 1) pos = 0;
- setMidCG(pos,strPos(midCG[pos],"인터넷종합")+1);
- highSelect.options.selectedIndex = pos;
- }
- window.onload = init;
- // - JavaScript - -->
- </script>
- </tr>
- </table>
'인터넷정보' 카테고리의 다른 글
이미지 슬라이드 (0) | 2007.10.18 |
---|---|
체크박스 전체선택 / 전체해제 (0) | 2007.10.18 |
매월 마지막 날자 구하기 (0) | 2007.10.18 |
마우스 좌표값 (0) | 2007.10.18 |
문서길이를 자동으로 맞추는 아이프레임 리사이즈 소스 6가지 (0) | 2007.10.18 |
다중 셀렉트(select) 박스 (0) | 2007.10.18 |
스크립트 인코딩 (Windows Script Encoder) (0) | 2007.10.18 |
익스플로러에서 인쇄 누르면 페이지 이동 시키기 (0) | 2007.10.18 |
마우스 오버/아웃시 소리효과 초간단 자바스크립트 (0) | 2007.10.18 |
새창 가운데 열기 - 중앙에 열기 (0) | 2007.10.18 |
다중 셀렉트(select) 박스
인터넷정보2007. 10. 18. 13:29
검색 단어 : 셀렉트, select, 하위 카테고리 소스는 업로드 클릭하세요. 참고로 제가 만든거 아닙니다. 예제 1 http://oxtag.com/html/ex/dynamicselect/js_dynamicselect.html 예제 2 http://oxtag.com/html/ex/dynamicselect/js_dynamicselect2.html 예제 3 http://oxtag.com/html/ex/dynamicselect/js_dynamicselect3.html 예제 4 http://oxtag.com/html/ex/dynamicselect/asp_dynamicselect.phps |
'인터넷정보' 카테고리의 다른 글
체크박스 전체선택 / 전체해제 (0) | 2007.10.18 |
---|---|
매월 마지막 날자 구하기 (0) | 2007.10.18 |
마우스 좌표값 (0) | 2007.10.18 |
문서길이를 자동으로 맞추는 아이프레임 리사이즈 소스 6가지 (0) | 2007.10.18 |
다중 셀렉트(select) 박스 2 (0) | 2007.10.18 |
스크립트 인코딩 (Windows Script Encoder) (0) | 2007.10.18 |
익스플로러에서 인쇄 누르면 페이지 이동 시키기 (0) | 2007.10.18 |
마우스 오버/아웃시 소리효과 초간단 자바스크립트 (0) | 2007.10.18 |
새창 가운데 열기 - 중앙에 열기 (0) | 2007.10.18 |
필드값의 유효성을 검사하는 함수 (0) | 2007.10.18 |