複数セレクトメニュー連動の追加の仕方について、教えてください
こんにちは、javascriptを使ったセレクトメニュー連動について教えてください
<BODY>
<script language="JavaScript">
<!--
menuItem = [["--------"],
["北海道"],
["青森県","岩手県","宮城県","秋田県","山形県","福島県"],
["茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"],
["新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県"],
["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"],
["鳥取県","島根県","岡山県","広島県","山口県"],
["徳島県","香川県","愛媛県","高知県"]]
menuval = [["dammy"],
["1-1"],
["2-1"],
["3-1","3-2","3-3","3-4","3-5","3-6","3-7"],
["4-1","4-2","4-3","4-4","4-5","4-6","4-7","4-8","4-9"],
["5-1","5-2","5-3","5-4","5-5","5-6","5-7"],
["6-1","6-2","6-3","6-4","6-5"],
["7-1","7-2","7-3","7-4"]]
function setMenu(n){
itemNum = menuItem[n].length;
document.myForm.Computer.length = itemNum;
for (i=0; i<itemNum; i++)
{
document.myForm.Computer.options[i] = new Option(menuItem[n][i],menuval[n][i]);
}
document.myForm.Computer.style.visibility = "visible";
}
// -->
</script>
<form name="myForm" method="POST" action="test.php" enctype="multipart/form-data" accept-charset="UTF-8">
<select name="Maker" onChange="setMenu(this.selectedIndex)">
<option value="dammy">--------</option>
<option value="omosiro">北海道地方</option>
<option value="syougeki">東北地方</option>
<option value="cinema">関東地方</option>
<option value="game">中部地方</option>
<option value="music">近畿地方</option>
<option value="sports">中国地方</option>
<option value="car">四国地方</option>
</select>
<select name="Computer" style="visibility:hidden">
<option value="dammy">--------</option>
</select>
<br>
<input type="reset" value="全ての入力をやり直す" onclick="location.reload()">
<INPUT type="submit" value="phpファイルにフォームからの入力データを渡す">
</form>
</BODY>
現在2つのセレクトメニュー連動まではできたのですが、さらにもう１段階追加しようとしてつまずいています。
まず１段階目のセレクトメニューで「東北地方」を選択したら、「青森県」「岩手県」などが右に新たなセレクトメニューとして出てきます。
その中からたとえば、「岩手県」を選択したら次に（つまり右側に）新たに「盛岡市」「宮古市」「平泉町」などが新たにセレクトメニューとして表示されるようにしたいのですがどうもうまくいきません
３段階目のセレクトメニューもうまく表示させる方法はないでしょうか。よろしくお願いします。
お礼
コメントありがとうございます。 やはりクッキーを使用したほうが良いみたいですね。 そこでネットで調べ上げて試してみたところ、思ったとおりの動作をするようになりました！ 今のところ不具合もなく動作しています。 もっとスマートに書けそうな気もしますが・・・； とりあえずこんな感じですよということで、コードを付けておきます！
補足
<html> <head> <title>テストテスト</title> <script language="JavaScript"><!-- menuItem = [ [ "--- 選択してください ---" ], ["--- 選択してください ---","あああ","あああ２","あああ３","あああ４","あああ５"], ["--- 選択してください ---","いいい","いいい２"], ["--- 選択してください ---","ううう","ううう２","ううう３"], ["--- 選択してください ---","えええ","えええ２","えええ３","えええ４"] ["--- 選択してください ---","おおお","おおお２","おおお３","おおお４","おおお５","おおお６"] ]; function setMenuItem(n){ var pullmenu = 4; len = document.aaa.bbb.options.length; for (i=len-1; i>=0; i--){ document.aaa.bbb.options[i] = null; } for (i=0; i<menuItem[n].length; i++){ document.aaa.bbb.options[i] = new Option(menuItem[n][i],menuItem[n][i]); for( j=1; j<=eval(pullmenu); j++ ){ if( document.aaa.Maker.selectedIndex == [j] ){ document.aaa.bbb.options[i].value = i+([j]*10); } } } } //COOKIE保存 function saveData(){ theName = "value1"; theValue = document.aaa.bbb.selectedIndex; theDay = 7; setDay = new Date(); setDay.setTime(setDay.getTime()+(theDay*1000*60*60*24)); expDay = setDay.toGMTString(); document.cookie = theName + "="+escape(theValue)+";expires="+expDay; } //COOKIEの読み込み window.onload = function(){ if( document.aaa.Maker.selectedIndex != "" ){ var pullmenu = 4; k = setMenuItem(document.getElementById('q1').value); for (i=0; i<k; i++){ document.aaa.bbb.options[i] = new Option(menuItem[k][i],menuItem[k][i]); for( j=1; j<=eval(pullmenu); j++ ){ if( document.aaa.Maker.selectedIndex == [j] ){ document.aaa.bbb.options[i].value = i+([j]*10); } } } theData = ""; theName = "value1="; theCookie = document.cookie+";"; start = theCookie.indexOf(theName); if (start != -1){ end = theCookie.indexOf(";",start); theData = unescape(theCookie.substring(start+theName.length,end)); } document.aaa.bbb.selectedIndex = theData; } } // --></script> </head> <body> <form name="aaa" action="./next.html" method="POST"> <select name="Maker" id="q1" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb" onChange="saveData()"> <option value="" selected>--- 選択してください ---</option> </select> <input type="submit" name="ok" vakue="ok"> </form> </body> </html>