말 그대로, 여러개 있는 체크박스 중에서 하나를 선택하면 그 해당항목에 따른 세부메뉴들이 선택상자에 표시되도록 하는 거지요.


이건... 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>



Posted by 떼르미
,


자바스크립트를 허용해주세요!
Please Enable JavaScript![ Enable JavaScript ]