JavaScript 선택한 항목에 따라 바뀌는 드롭다운박스 (3단콤보)
페이지 정보
본문
두개의 선택문을 이용해서 첫번재 선택문에 연동하여 두번재 항목을 선택하고자 할때
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<form name="fm"> <!-- name 값을 동일하게 변경합니다. 현재 = fm-->
<select name="c1" onChange="redirect(this.options.selectedIndex)">
<option>선택하세요</option>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
<select name="c2">
<option></option>
</select>
<script type="text/Javascript">
<!--
// 위쪽 form의 name값 fm 수정시 아래도 동일하게 변경
var groups=document.fm.c1.options.length // c1 : 첫번째 name값
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
// "선택하세요" 2번째 항목
group[0][0]=new Option("","왼쪽먼저")
// 선택1 연동
group[1][0]=new Option("Option01","Value01")
group[1][1]=new Option("Option02","Value02")
group[1][2]=new Option("Option03","Value03")
// 선택2 연동
group[2][0]=new Option("Option11","Value11")
// 선택3 연동
group[3][0]=new Option("Option21","Value21")
group[3][1]=new Option("Option22","Value22")
var temp=document.fm.c2 // c2 : 두번째 name값
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
//-->
</script>
</form>
</body>
</html>
## 참조사이트 ##
2단콤보
http://blog.naver.com/foxinforest?Redirect=Log&logNo=10001029404
3단콤보
http://cafe.naver.com/hacosa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=64
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=65461286
4단콤보
http://blog.empas.com/lhmlhm/6570578
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<form name="fm"> <!-- name 값을 동일하게 변경합니다. 현재 = fm-->
<select name="c1" onChange="redirect(this.options.selectedIndex)">
<option>선택하세요</option>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
<select name="c2">
<option></option>
</select>
<script type="text/Javascript">
<!--
// 위쪽 form의 name값 fm 수정시 아래도 동일하게 변경
var groups=document.fm.c1.options.length // c1 : 첫번째 name값
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
// "선택하세요" 2번째 항목
group[0][0]=new Option("","왼쪽먼저")
// 선택1 연동
group[1][0]=new Option("Option01","Value01")
group[1][1]=new Option("Option02","Value02")
group[1][2]=new Option("Option03","Value03")
// 선택2 연동
group[2][0]=new Option("Option11","Value11")
// 선택3 연동
group[3][0]=new Option("Option21","Value21")
group[3][1]=new Option("Option22","Value22")
var temp=document.fm.c2 // c2 : 두번째 name값
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
//-->
</script>
</form>
</body>
</html>
## 참조사이트 ##
2단콤보
http://blog.naver.com/foxinforest?Redirect=Log&logNo=10001029404
3단콤보
http://cafe.naver.com/hacosa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=64
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=65461286
4단콤보
http://blog.empas.com/lhmlhm/6570578
댓글목록
등록된 댓글이 없습니다.