2단 셀렉트 메뉴의 처음 선택값에 따라 각각 다른 입력폼으로...

도움 주셨으면 합니다.

2단 셀렉트 메뉴의 첫째(1차) 선택된 값에 따라,

각각 다른 입력폼(질문)으로 보여지게 하려고 합니다.

먼저, 동적 셀렉트 메뉴...

---------------------------------------------------------------------------------------

<script>
var hobby0 = new Array("-선택-","");
var hobby1 = new Array("보석","향수","우표","골동품","화폐");
var hobby2 = new Array("헹글라이딩","패러글라이딩","스카이다이빙","스쿠버다이빙");
var hobby3 = new Array("독서","영화","사진","미술","악기");
var hobby4 = new Array("공예","사진","그림","문예");
function hobbychange(item){
var temp, i=0, j=0;
var ccount, cselect;
temp = document.signform.hobby;
for (i=(temp.options.length-1) ; i>0 ; i--){ temp.options[i] = null; }
eval('ccount = hobby' + item + '.length');
for (j=0 ; j<ccount ; j++) {
eval('cselect = hobby' + item + '[' + j + '];');
temp.options[j]= new Option(cselect,cselect);
}
temp.options[0].selected=true;
return true;
}
</script>
<form name=signform>
<table cellpadding=1>
<tr>
<td>1차</td>
<td>2차</td>
</tr>
<tr>
<td>
<select name=bighobby onChange=javascript:hobbychange(document.signform.bighobby.options.selectedIndex);>
<option selected value="">-선택-</option>
<option value=수집>수집</option>
<option value=야외>야외</option>
<option value=문화>문화</option>
<option value=창작>창작</option>
</select>
</td>
<td>
<select name=hobby size=1>
<option selected value="">-선택-</option>
<option value=""></option>
</select>
</td>
</tr>
</table>
</form>

---------------------------------------------------------------------------------------

1차 선택이... "수집", "야외", "문화"인 경우에는 [ 질문 1 ]을...

1차 선택이... "창작"을 선택한 경우엔 [ 질문 2 ]가 보여졌으면 합니다.

---------------------------------------------------------------------------------------

셀렉트 메뉴 첫째 선택값을 어떻게 배열해 주어야 하나요...?

글수정 할 경우에도 문제없이 잘 작동하게 하고 싶습니다...

고수님들께서 도움 주셨으면 합니다.

---------------------------------------------------------------------------------------

<form>

... 이부분이 막막합니다 ...

<div style="relative; display:block;">

<div id="Q1">
... [ 질문 1 ] ...
</div>

<div id="Q2" style="absolute; display:none;">
... [ 질문 2 ] ...
</div>

</div>

</form>


<script type="text/javascript">
function input(temp)
{
if(temp==1)
{
document.getElementById("Q1").style.display="";
document.getElementById("Q2").style.display="none";
}else{
document.getElementById("Q1").style.display="none";
document.getElementById("Q2").style.display="";
}
}
</script>