##################################### # Select Box 콘트롤 하기 # ##################################### 작성자 : 장형화(hhjang97@venus.uos.ac.kr) 작성일 : 2004. 11. 01 수정일 : 원본 : 설명 : 자바스크립을 이용하여 select box 가지고 놀기... ################################# ################################# ################################# ################################# # ################################# ################################# # Sub SelectBox 추가 및 제거 ################################# <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Select Box 콘트롤 하기</title> <script language="javascript"> <!-- tableNames = new Array(); tableNames[0] = "tmpPoint"; tableNames[1] = "tmpLine"; tableNames[2] = "tmpPolygon"; lists = new Array(); values = new Array(); //======= 점 ========== list1 = new Array(); value1 = new Array(); list1[0] = "NAME"; value1[0] = "NAME(VARCHAR)"; list1[1] = "GEOM"; value1[1] = "GEOM(POINT)"; list1[2] = "ETC"; value1[2] = "ETC(VARCHAR)"; list1[3] = "ETC2"; value1[3] = "ETC2(VARCHAR)"; //======= 선 ========== list2 = new Array(); value2 = new Array(); list2[0] = "NAME"; value2[0] = "NAME(VARCHAR)"; list2[1] = "GEOM"; value2[1] = "GEOM(LINESTRING)"; list2[2] = "ETC"; value2[2] = "ETC(VARCHAR)"; list2[3] = "ETC2"; value2[3] = "ETC2(VARCHAR)"; //======= 면 ========== list3 = new Array(); value3 = new Array(); list3[0] = "NAME"; value3[0] = "NAME(VARCHAR)"; list3[1] = "GEOM"; value3[1] = "GEOM(POLYGON)"; list3[2] = "ETC"; value3[2] = "ETC(VARCHAR)"; list3[3] = "ETC2"; value3[3] = "ETC2(VARCHAR)"; lists[0] = list1; lists[1] = list2; lists[2] = list3; values[0] = value1; values[1] = value2; values[2] = value3; // Table 을 변경하면 하위 메뉴도 변경한다. function changeTableIdx(form, idx) { //alert('Table 을 변경하면 하위 메뉴도 변경한다.') initSelectBox(form.subSelect1); initSelectBox(form.subSelect2); lists = new Array(); list1 = new Array(); list1[0] = "modify sel1"; list1[1] = "modify sel2"; list1[2] = "modify sel3"; list2 = new Array(); list2[0] = "modify sel 2222"; list2[1] = "modify sel 3333"; list2[2] = "modify sel 4444"; lists[0] = list1; lists[1] = list2; // addSelectBox(form.subSelect1, list1); // addSelectBox(form.subSelect2, list2); addSelectBox(form.subSelect1, lists[idx]); // 2차원 배열 이용 } // Table 을 변경하면 하위 메뉴도 변경한다. function changeTable(form) { //alert('Table 을 변경하면 하위 메뉴도 변경한다.') initSelectBox(form.subSelect1); initSelectBox(form.subSelect2); lists = new Array(); list1 = new Array(); list1[0] = "modify sel1"; list1[1] = "modify sel2"; list1[2] = "modify sel3"; list2 = new Array(); list2[0] = "modify sel 2222"; list2[1] = "modify sel 3333"; list2[2] = "modify sel 4444"; lists[0] = list1; lists[1] = list2; // addSelectBox(form.subSelect1, list1); // addSelectBox(form.subSelect2, list2); addSelectBox(form.subSelect1, lists[0]); // 2차원 배열 이용 addSelectBox(form.subSelect2, lists[1]); } function addSelectBox(selectBox, strings) { for(i=0,max=strings.length; i<max; i++) { var tmpOption = new Option(strings[i], strings[i]); selectBox.options[i] = tmpOption; } } // select box 의 내용을 지운다. function initSelectBox(selectBox) { // var selectBox = form.subSelect1; //alert('select box 의 내용을 지운다.'); while(selectBox.length>0) { selectBox.options[0] = null; } } function del(code) { // alert(code); var attr = eval('document.element.' + code); attr.value = ''; } // 수정 내용을 반영한다. function modifySubmit() { var f = document.element; // f.action='dec_modifyruleexe.jsp'; f.target='_self'; f.submit(); } //--> </script> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"> <table border=1 width=100%> <tr><th>Select Box 콘트롤 하기</th></tr> </table> <p> 1. 상위 select box 를 선택하면 하위 select box 가 변한다. <br> <form name='selectBox'> <SELECT NAME='newTableName' onChange='changeTable(this.form)'> <OPTION value='table1'>Table 1</OPTION> <OPTION value='table2'>Table 2</OPTION> <OPTION value='table3'>Table 3</OPTION> </SELECT> <br> <br><br> <SELECT NAME='subSelect1' onChange="initSelectBox(this.form.subSelect1)"> <OPTION value='select1'>select 1</OPTION> <OPTION value='select2'>select 2</OPTION> <OPTION value='select3'>select 3</OPTION> </SELECT> &nbsp;&nbsp;&nbsp;&nbsp; <SELECT NAME='subSelect2'> <OPTION value='select1'>select 1</OPTION> <OPTION value='select2'>select 2</OPTION> <OPTION value='select3'>select 3</OPTION> </SELECT> </form> </body> </html>