プルダウン選択肢で、フォームの内容を変更したい

質問

javascript始めたばかりの23才女子です。
プルダウンメニューの選択肢が3つ、その選択肢の組み合わせによって当てはまるフィールドを表示させたいのです。

選択肢が以下の要領・・・
(1)性別　-男　-女
(2)年齢　-10代　-20代　-30代
(3)出身 -関東　-関西　

そして「表示する」のボタンを押せば

例：「男・10代・関東」に当てはまるフィールドが同じ画面下に出てくるというのが理想です。
選択肢は最大１２パターンなので、１２つのフレームを作ろうと思っています。

参考とさせていただいたのは下記URLのANo1さんです。
http://okwave.jp/qa/q6120110.html

html、java scriptは今まで参考になるページに手を加えていった程度です。
教えていただければ本当に助かります。よろしくお願いします！！

回答No.1

mikemike7

大まかな仕様書しかなかったので、
とりあえず簡単なサンプル作ってみました。
各セレクトボックス値を _ でつなぎ合わせたHTMLをIFRAME内で表示という形式にしています。

<script type="text/javascript"><!--
function check(form){
var sex = form.sex.value;
var age = form.age.value;
var area = form.area.value;
if(!sex || !age || !area){return false;}
// 各セレクトボックス値を_でつなげたHTMLファイル名とする
var htmlfile = sex+"_"+age+"_"+area+".html";
document.getElementById("hoge").src = htmlfile;
return false;
}
--></script>

<form>
<select name="sex">
<option value="">性別</option>
<option value="man">男</option>
<option value="woman">女</option>
</select>
<select name="age">
<option value="">年齢</option>
<option value="10">10代</option>
<option value="20">20代</option>
<option value="30">30代</option>
</select>
<select name="area">
<option value="">出身</option>
<option value="kanto">関東</option>
<option value="kansai">関西</option>
</select>
<input type="button" onclick="check(this.form)" value="表示">
</form>
<iframe src="about:blank" id="hoge">

男、10代、関東を選択した場合は、man_10_kanto.htmlを表示
女、10代、関東を選択した場合は、woman_10_kanto.htmlを表示
男、10代、関西を選択した場合は、man_10_kansai.htmlを表示
といった感じです。