말 그대로, 여러개 있는 체크박스 중에서 하나를 선택하면 그 해당항목에 따른 세부메뉴들이 선택상자에 표시되도록 하는 거지요.
이건... ServerSide Script로 처리하면 매우 쉽지만... 다시 뿌려주기 때문에 화면이 껌뻑거리고 서버에 약간의 부하를 더 준다는 의미에서 별로 바람직하지 않지요.
가볍게... Client Script로 처리할 수 있습니다. 물론 DB에서 긁어서(Server에 있는 정보로) 데이터를 채워주려면 ServerSide Script도 넣어주면 되겠지만...
자.
<html>
<head>
<title>keyinet</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<basefont size="2">
<script language="Javascript">
<!--//
function Activity(name, list) {
this.name = name;
this.list = list;
}
var books = new Array();
books[0] = new Activity('베스트셀러', ['가시고기', '해리포터와 마법사의 돌', '부자아빠 가난한 아빠']);
books[1] = new Activity('컴퓨터분야', ['주부 인터넷 길라잡이', '플래시 4 애니메이션', '나모 웹에디터 4']);
books[2] = new Activity('소설분야', ['가시고기', '해리포터와 마법사의 돌', '상실의 시대']);
books[3] = new Activity('경제경영분야', ['부자 아빠 가난한 아빠', '남자처럼 일하고 여자처럼 승리하라', '가르시아 장군에게 보내는 메시지']);
function updateList(str) {
var frm = document.myForm;
var oriLen = frm.myList.length;
var numBooks;
for (var i = 0; i < books.length; i++) {
if (str == books[i].name) {
numBooks = books[i].list.length;
for (var j = 0; j < numBooks; j++) {
frm.myList.options[j] = new Option(books[i].list[j], i + '-' + j);
}
for (var j = numBooks; j < oriLen; j++) {
frm.myList.options[j] = null;
}
}
}
}
function ClickThen() {
alert(myForm.myList.value);
}
//-->
</script>
</head>
<body>
<center>
<br><br>
<form name=myForm>
<input type=radio name=kevin value=베스트셀러 onclick="updateList(this.value)" checked>베스트셀러
<input type=radio name=kevin value=컴퓨터분야 onclick="updateList(this.value)">컴퓨터분야
<input type=radio name=kevin value=소설분야 onclick="updateList(this.value)">소설분야
<input type=radio name=kevin value=경제경영분야 onclick="updateList(this.value)">경제경영분야
<br><br>
<select name=myList>
<option value="0-0">가시고기</option>
<option value="0-1">해리포터와 마법사의 돌</option>
<option value="0-2">부자아빠 가난한 아빠</option>
</select>
</form>
<br><br>
<input type=button name=but01 value="값 확인" onclick="ClickThen()">
</center>
</body>
</html>
'Tech: > HTML·DHTML' 카테고리의 다른 글
| 웹에서 마우스 오른쪽 버튼을 못쓰게 하기(2) (0) | 2008.06.26 |
|---|---|
| 웹 페이지의 아이콘(Favicon) 설정 (0) | 2008.06.26 |
| 컨트롤을 이용하지 않은 실시간 내용 갱신 (0) | 2008.06.26 |
| window.open의 주의사항 (0) | 2008.06.26 |
| 테이블, 입력상자의 Border Style들 (0) | 2008.06.26 |
