검색 단어 : 셀렉트, select, 하위 카테고리http://oxtag.com/html/ex/dynamicselect/js_dynamicselect.html more.. less..
< html >
< head >
< script language = "javascript" >
NS4 = ( document . layers ) ? true : false ;
delta = 1 ;
var jobArray = new Array ( ) ;
var titleArray = new Array ( ) ;
var job ;
var ind ;
< / script >
< / head >
< body >
< form name = IOS action = etcorgdisplay_test . html >
< script language = "javascript" >
function loadDefaults ( i , j , s )
{
if ( i != '' ) {
document . IOS ['ind' ]. options [getValueIndex ( document . forms ['IOS' ]['ind' ], i ) ]. selected = true ;
setInd ( document . forms ['IOS' ]['ind' ]) ;
document . forms ['IOS' ]['job' ]. options [getValueIndex ( document . forms ['IOS' ]['job' ], j ) ]. selected = true ;
setJob ( document . forms ['IOS' ]['job' ]) ;
document . forms ['IOS' ]['spe' ]. options [getValueIndex ( document . forms ['IOS' ]['spe' ], s ) ]. selected = true ;
}
}
function loadDefaultJobs ( i ,j ,s ) {
if ( i != '' ) {
document . forms ['IOS' ]['job' ]. options [getValueIndex ( document . forms ['IOS' ]['job' ], j ) ]. selected = true ;
fillTitle ( i ) ;
setJob ( document . forms ['IOS' ]['job' ]) ;
document . forms ['IOS' ]['spe' ]. options [getValueIndex ( document . forms ['IOS' ]['spe' ], s ) ]. selected = true ;
}
}
function loadDefaultSpecs ( i ,j ,s ) {
if ( i != '' & & j != '' ) {
document . forms ['IOS' ]['spe' ]. options [getValueIndex ( document . forms ['IOS' ]['spe' ], s ) ]. selected = true ;
fillJob ( j ) ;
}
}
function removeElement ( arr , element )
{
for ( i = 0; i < arr . length ; i + + ) {
if ( arr [i ]. search ( ';' + element ) != - 1 ) {
arr1 = arr . slice ( 0, i ) ;
arr2 = arr . slice ( i + 1 ) ;
arr = arr1 . concat ( arr2 ) ;
return arr ;
}
}
}
function getTitle ( industry ) {
titleArr = new Array ( ) ;
if ( industry = = '010000' ) {
var i0Arr = new Array (
"본부관내;010100" ,
"본부관외;010200" ) ;
titleArr = i0Arr . concat ( titleArr ) ;
return titleArr ;
}
if ( industry = = '020000' ) {
var i1Arr = new Array (
"정당;020100" ,
"정치단체;020200" ) ;
titleArr = i1Arr . concat ( titleArr ) ;
return titleArr ;
}
if ( industry = = '030000' ) {
var i2Arr = new Array (
"조기축구회;030100" ,
"배드민턴회;030200" ,
"볼링회;030300" ,
"검도회;030400" ,
"태권도회;030500" ,
"수영모임;030600" ,
"당구모임;030700" ,
"자동차동호회;030800" ,
"바둑동호회;030900" ,
"등산모임;031100" ,
"낚시출조회;031200" ,
"기타;031300" ) ;
titleArr = i2Arr . concat ( titleArr ) ;
return titleArr ;
}
if ( industry = = '040000' ) {
var i3Arr = new Array (
"종친회;040100" ,
"향우회;040200" ,
"동창/동문회;040300" ,
"계모임;040400" ,
"음악(밴드)동아리;040500" ,
"미술동아리;040600" ,
"공작(DIY)모임;040700" ,
"기타;040800" ) ;
titleArr = i3Arr . concat ( titleArr ) ;
return titleArr ;
}
if ( industry = = '050000' ) {
var i4Arr = new Array (
"지역;050100" ,
"정치;050200" ,
"레져/스포츠;050300" ,
"친목/취미;050400" ,
"기타;050500" ) ;
titleArr = i4Arr . concat ( titleArr ) ;
return titleArr ;
}
return titleArr ;
}
aaFunction = new Array (
"통/반;010101" ,
"입주자회의;010102" ,
"부녀회;010103" ,
"각종대책위원회;010104" ,
"기타;010105" ) ;
abFunction = new Array (
"통/반;010201" ,
"입주자회의;010202" ,
"부녀회;010203" ,
"각종대책위원회;010204" ,
"기타;010205" ) ;
acFunction = new Array (
"초등학교;040301" ,
"중학교;040302" ,
"고등학교;040303" ,
"대학교;040304" ,
"대학원;040305" ) ;
noFunction = new Array ( "[선택할 필요없음];" ) ;
function getJobFunction ( title ) {
if ( title = = '010100' ) { return aaFunction ; }
if ( title = = '010200' ) { return abFunction ; }
if ( title = = '040300' ) { return acFunction ; }
return noFunction ;
}
function GetSelectedText ( box ) {
var boxText = '' ;
for ( var i = 0; i < box . options . length ; i + + ) {
if ( box . options [i ]. selected & & box . options [i ]. value != '' ) {
boxText = box . options [i ]. value ;
}
}
return boxText ;
}
function getValueIndex ( box , value ) {
for ( var i = 0; i < box . options . length ; i + + ) {
if ( box . options [i ]. value = = value )
return i ;
}
return 0;
}
function compare ( s1 , s2 ) {
var t1 = s1 . toLowerCase ( ) ;
var t2 = s2 . toLowerCase ( ) ;
if ( t1 < t2 ) {
return - 1 ;
}
if ( t1 > t2 ) {
return 1 ;
}
return 0;
}
function fillTitle ( industry ) {
document . forms ['IOS' ]['job' ]. length = 1 ;
var cnt = 1 ;
var isSelected = false ;
var arr = getTitle ( industry ) ;
arr . sort ( compare ) ;
//document.forms['IOS']['job'].length=arr.length+1;
for ( var n = 0; n < arr . length ; n + + ) {
newOpt = new Option ;
i = arr [n ]. search ( ';' ) ;
newOpt . value = arr [n ]. slice ( i + 1 ) ;
newOpt . text = arr [n ]. slice ( 0,i ) ;
if ( !isSelected ) {
//newOpt.selected = true;
isSelected = true ;
}
document . forms ['IOS' ]['job' ]. options [cnt ]= newOpt ;
cnt = cnt + 1 ;
}
/* if(NS4){
window.resizeBy(delta, delta);
delta = -1*delta;
} */
}
function fillJob ( title ) {
document . forms ['IOS' ]['spe' ]. length = 0;
var cnt = 0;
var isSelected = false ;
var arr = getJobFunction ( title ) ;
if ( arr . length != 1 ) {
var tmp = new Array ( "[예시단체 선택];-1" ) ;
arr = tmp . concat ( arr ) ;
}
for ( var n = 0; n < arr . length ; n + + ) {
newOpt = new Option ;
i = arr [n ]. search ( ';' ) ;
newOpt . value = arr [n ]. slice ( i + 1 ) ;
newOpt . text = arr [n ]. slice ( 0,i ) ;
if ( !isSelected ) {
newOpt . selected = true ;
isSelected = true ;
}
document . forms ['IOS' ]['spe' ]. options [cnt ]= newOpt ;
cnt = cnt + 1 ;
}
if ( !( NS4 ) ) {
if ( arr . length != 1 ) {
document . forms ['IOS' ]['spe' ]. style . visibility = 'visible' ;
} else {
document . forms ['IOS' ]['spe' ]. style . visibility = 'hidden' ;
}
} // not Netscapoe 4
/* if(NS4){
window.resizeBy(delta, delta);
delta = -1*delta;
} */
}
function setInd ( box ) {
ind = GetSelectedText ( box ) ;
if ( ind != '' ) {
fillTitle ( ind ) ;
}
//alert(ind);
}
function setJob ( box ) {
title = GetSelectedText ( box ) ;
//alert(job);
if ( ind != '' ) {
doIt ( ) ;
}
}
function doIt ( ) {
if ( ind != '' & & title != '' ) {
fillJob ( title ) ;
} else {
alert ( "각종단체 범주와 종류를 선택해 주세요" ) ;
}
}
< !- -
function setupDefaults ( ) {
loadDefaults ( "" ,"" ,"" ) ;
}
// -->
< / script >
< p >
< table border = 0>
< tr > < td align = right class = "content" > & nbsp ; & nbsp ; & nbsp ; < font color = "#ff0000" > * < / font > 각종단체( 범주) : < / td >
< td class = "content" >
< select onchange = setInd ( this ) size = 1 name = "ind" >
< option value = "" selected > [각종단체( 범주) ]< / option >
< option value = '010000' > 지역 < / option >
< option value = '020000' > 정치 < / option >
< option value = '030000' > 레져/ 스포츠 < / option >
< option value = '040000' > 친목/ 취미 < / option >
< option value = '050000' > 온라인 동호회 < / option >
< option value = '060000' > 기타 < / option >
< / select >
< / td >
< td align = right class = "content" > & nbsp ; & nbsp ; & nbsp ; < font color = "#ff0000" > * < / font > 각종단체( 종류) : < / td >
< td class = "content" >
< select onchange = setJob ( this ) size = 1 name = "job" >
< option value = "" selected > [각종단체( 종류) ]< / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< / select >
< / td >
< td align = right class = "content" > & nbsp ; & nbsp ; & nbsp ; < font color = "#ff0000" > * < / font > 예시단체: < / td >
< td class = "content" >
< select size = 1 name = "spe" >
< option value = "" selected > [예시단체]< / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< option > & nbsp ; < / option >
< / select >
< / td >
< td align = right class = "content" > & nbsp ; & nbsp ; & nbsp ; < input type = submit value = 등록> < / td >
< / tr >
< / table >
< / form >
< / body >
< / html >
less.. http://oxtag.com/html/ex/dynamicselect/js_dynamicselect2.html more.. less..
< script language = 'javascript' >
var cnt = new Array ( ) ;
cnt [0] = new Array ( '전체' ) ;
cnt [1 ] = new Array ( '전체' ,'강남구' ,'강동구' ,'강북구' ,'강서구' ,'관악구' ,'광진구' ,'구로구' ,'금천구' ,'노원구' ,'도봉구' ,'동대문구' ,'동작구' ,'마포구' ,'서대문구' ,'서초구' ,'성동구' ,'성북구' ,'송파구' ,'양천구' ,'영등포구' ,'용산구' ,'은평구' ,'종로구' ,'중구' ,'중랑구' ) ;
cnt [2 ] = new Array ( '전체' ,'강서구' ,'금정구' ,'남구' ,'동구' ,'동래구' ,'부산진구' ,'북구' ,'사상구' ,'사하구' ,'서구' ,'수영구' ,'연제구' ,'영도구' ,'중구' ,'해운대구' ,'기장군' ) ;
cnt [3 ] = new Array ( '전체' ,'남구' ,'달서구' ,'동구' ,'북구' ,'서구' ,'수성구' ,'중구' ,'달성군' ) ;
cnt [4 ] = new Array ( '전체' ,'계양구' ,'남구' ,'남동구' ,'동구' ,'부평구' ,'서구' ,'연수구' ,'중구' ,'강화군' ,'옹진군' ) ;
cnt [5 ] = new Array ( '전체' ,'광산구' ,'남구' ,'동구' ,'북구' ,'서구' ) ;
cnt [6 ] = new Array ( '전체' ,'대덕구' ,'동구' ,'서구' ,'유성구' ,'중구' ) ;
cnt [7 ] = new Array ( '전체' ,'남구' ,'동구' ,'북구' ,'중구' ,'울주군' ) ;
cnt [8 ] = new Array ( '전체' ,'고양시' ,'과천시' ,'광명시' ,'구리시' ,'군포시' ,'남양주시' ,'동두천시' ,'부천시' ,'성남시' ,'수원시' ,'시흥시' ,'안산시' ,'안양시' ,'오산시' ,'의왕시' ,'의정부시' ,'평택시' ,'하남시' ,'가평군' ,'광주시' ,'김포시' ,'안성시' ,'양주군' ,'양평군' ,'여주군' ,'연천군' ,'용인시' ,'이천군' ,'파주시' ,'포천시' ,'화성시' ) ;
cnt [9 ] = new Array ( '전체' ,'강릉시' ,'동해시' ,'삼척시' ,'속초시' ,'원주시' ,'춘천시' ,'태백시' ,'고성군' ,'양구군' ,'양양군' ,'영월군' ,'인제군' ,'정선군' ,'철원군' ,'평창군' ,'홍천군' ,'화천군' ,'황성군' ) ;
cnt [10 ] = new Array ( '전체' ,'제천시' ,'청주시' ,'충주시' ,'괴산군' ,'단양군' ,'보은군' ,'영동군' ,'옥천군' ,'음성군' ,'진천군' ,'청원군' ) ;
cnt [11 ] = new Array ( '전체' ,'공주시' ,'보령시' ,'서산시' ,'아산시' ,'천안시' ,'금산군' ,'논산군' ,'당진군' ,'부여군' ,'서천군' ,'연기군' ,'예산군' ,'청양군' ,'태안군' ,'홍성군' ) ;
cnt [12 ] = new Array ( '전체' ,'군산시' ,'김제시' ,'남원시' ,'익산시' ,'전주시' ,'정읍시' ,'고창군' ,'무주군' ,'부안군' ,'순창군' ,'완주군' ,'임실군' ,'장수군' ,'진안군' ) ;
cnt [13 ] = new Array ( '전체' ,'광양시' ,'나주시' ,'목포시' ,'순천시' ,'여수시' ,'여천시' ,'강진군' ,'고흥군' ,'곡성군' ,'구례군' ,'담양군' ,'무안군' ,'보성군' ,'신안군' ,'여천군' ,'영광군' ,'영암군' ,'완도군' ,'장성군' ,'장흥군' ,'진도군' ,'함평군' ,'해남군' ,'화순군' ) ;
cnt [14 ] = new Array ( '전체' ,'경산시' ,'경주시' ,'구미시' ,'김천시' ,'문겅시' ,'상주시' ,'안동시' ,'영주시' ,'영천시' ,'포항시' ,'고령군' ,'군위군' ,'봉화군' ,'성주군' ,'영덕군' ,'영양군' ,'예천군' ,'울릉군' ,'울진군' ,'의성군' ,'청도군' ,'청송군' ,'칠곡군' ) ;
cnt [15 ] = new Array ( '전체' ,'거제시' ,'김해시' ,'마산시' ,'밀양시' ,'사천시' ,'울산시' ,'진주시' ,'진해시' ,'창원시' ,'통영시' ,'거창군' ,'고성군' ,'남해군' ,'산청군' ,'양산시' ,'의령군' ,'창녕군' ,'하동군' ,'함안군' ,'함양군' ,'합천군' ) ;
cnt [16 ] = new Array ( '전체' ,'서귀포시' ,'제주시' ,'남제주군' ,'북제주군' ) ;
function change ( add ) {
sel = document . form . county
/* 옵션메뉴삭제 */
for ( i = sel . length - 1 ; i > = 0; i - - ) {
sel . options [i ] = null
}
/* 옵션박스추가 */
for ( i = 0; i < cnt [add ]. length ; i + + ) {
sel . options [i ] = new Option ( cnt [add ][i ], cnt [add ][i ]) ;
}
}
< / script >
< form name = form method = post action = $PHP_SELF >
시/ 도:
< select name = 'city' onchange = "change(this.selectedIndex);" class = input >
< option value = '전체' > 전체< / option >
< option value = '서울' > 서울특별시< / option >
< option value = '부산' > 부산광역시< / option >
< option value = '대구' > 대구광역시< / option >
< option value = '인천' > 인천광역시< / option >
< option value = '광주' > 광주광역시< / option >
< option value = '대전' > 대전광역시< / option >
< option value = '울산' > 울산광역시< / option >
< option value = '경기' > 경기도< / option >
< option value = '강원' > 강원도< / option >
< option value = '충북' > 충청북도< / option >
< option value = '충남' > 충청남도< / option >
< option value = '전북' > 전라북도< / option >
< option value = '전남' > 전라남도< / option >
< option value = '경북' > 경상북도< / option >
< option value = '경남' > 경상남도< / option >
< option value = '제주' > 제주도< / option >
< / select >
구/ 군:
< select name = 'county' class = select >
< option value = '' > 전체< / option >
< / select >
< / form >
less.. http://oxtag.com/html/ex/dynamicselect/js_dynamicselect3.html more.. less..
< script language = 'javascript' >
var cnt = new Array ( ) ;
cnt [0] = new Array ( '수입/지출항목을 선택해주세요' ) ;
cnt [1 ] = new Array ( '운송수입-계약금' ,'운송수입-잔금' ,'미수금회수' ,'창고보관수입' ,'영업외수익' ,'기타수익' ) ;
cnt [2 ] = new Array ( '대여금' ,'인건비-일용직' ,'인건비-정규직' ,'상여금' ,'수당' ,'용차료' ,'직영차사용료' ) ;
function change ( ku ) {
sel = document . psm . sel2
/* 옵션메뉴삭제*/
for ( i = sel . length - 1 ; i > = 0; i - - ) {
sel . options [i ] = null
}
/* 옵션박스추가 */
for ( i = 0; i < cnt [ku ]. length ; i + + ) {
sel . options [i ] = new Option ( cnt [ku ][i ], cnt [ku ][i ]) ;
}
}
< / script >
< form name = 'psm' method = 'post' action = $PHP_SELF >
< select name = 'sel1' onchange = "change(this[this.selectedIndex].value);" class = select >
< option value = '0' > 항목< / option >
< option value = '1' > 수입항목< / option >
< option value = '2' > 지출항목< / option >
< / select > < - - 항목선택
< select name = 'sel2' class = 'select' >
< option > 수입/ 지출항목을 선택해주세요< / option >
< / select >
< / form >
less.. http://oxtag.com/html/ex/dynamicselect/asp_dynamicselect.phps more.. less.. < script language = "JavaScript" > ca_array = new Array( 4 ); ca_array [ "1" ] = new Array(new de_ca_array ( '0' , '하위카테고리' ), new de_ca_array ( '11' , 'DE_A1' ), new de_ca_array ( '12' , 'DE_A2' )); ca_array [ "2" ] = new Array(new de_ca_array ( '0' , '하위카테고리' ), new de_ca_array ( '21' , 'DE_B1' ), new de_ca_array ( '22' , 'DE_B2' )); ca_array [ "3" ] = new Array(new de_ca_array ( '0' , '하위카테고리' ), new de_ca_array ( '31' , 'DE_C1' )); ca_array [ "4" ] = new Array(new de_ca_array ( '0' , '하위카테고리' ), new de_ca_array ( '41' , 'DE_D1' )); de_ca_array ( detail_category , detail_name ) { this . detail_category = detail_category ; this . detail_name = detail_name ; this ; call_de_ca ( f ) { detail_category = f . category . options [ f . category . selectedIndex ]. value ; detail_category == "0" ) { i = 1 ; i < f . detail_category . options . length ; i ++) f . detail_category . options [ i ] = new Option ( ' ' , '0' ); f . detail_category . options [ 0 ]. selected = true ; i = 0 ; i < ca_array [ detail_category ]. length ; i ++) f . detail_category . options [ i ] = new Option ( ca_array [ detail_category ][ i ]. detail_name , ca_array [ detail_category ][ i ]. detail_category ); i = ca_array [ detail_category ]. length ; i < f . detail_category . options . length ; i ++) f . detail_category . options [ i ] = new Option ( ' ' , '0' ); f . detail_category . options [ 0 ]. selected = true ; </script>
less.. 
