複数セレクトメニュー連動の追加・・・その後
2008年の、当サイトでのＱ＆Ａを拝見しまして、fujillinさんのご回答を参考に、プルダウンメニューを作っています。
一つの選択肢が１００件以上必要なので、作りましたところ、１００件以上のプルダウンを選択し他後、別の親選択肢を選ぶと、子のデーターに、先程の１００件以上の選択肢が残って表示されてしまいます。
大変お手数ですが、javascript初心者なもので、どなたかご教授いただけますと、大変助かります。
以下は、fujillinさんオリジナルに、１００件以上のデータを付け加えた、テストコードです。
<html>
<head>
<script>
var sBox=[];
var iData={'全国':'北海道地方,東北地方,関東地方,その他',
'北海道地方':'北海道',
'東北地方':'青森県,岩手県,宮城県',
'関東地方':'茨城県,栃木県,東京都',
'北海道':'函館市,札幌市,旭川市',
'岩手県':'盛岡市,宮古市,平泉市',
'東京都':'23区,武蔵野市,三鷹市,調布市,府中市',
'23区':'千代田区,中央区,港区,文京区,新宿区,渋谷区,台東区,墨田区',
'千代田区':'旭町,淡路町,飯田橋,内幸町,神田',
'その他':'１＝1,２＝2,３＝3,４＝4,５＝5,６＝6,７＝7,８＝8,９＝9,１０＝10,１１＝11,１２＝12,１３＝13,１４＝14,１５＝15,１６＝16,１７＝17,１８＝18,１９＝19,２０＝20,２１＝21,２２＝22,２３＝23,２４＝24,２５＝25,２６＝26,２７＝27,２８＝28,２９＝29,３０＝30,３１＝31,３２＝32,３３＝33,３４＝34,３５＝35,３６＝36,３７＝37,３８＝38,３９＝39,４０＝40,４１＝41,４２＝42,４３＝43,４４＝44,４５＝45,４６＝46,４７＝47,４８＝48,４９＝49,５０＝50,５１＝51,５２＝52,５３＝53,５４＝54,５５＝55,５６＝56,５７＝57,５８＝58,５９＝59,６０＝60,６１＝61,６２＝62,６３＝63,６４＝64,６５＝65,６６＝66,６７＝67,６８＝68,６９＝69,７０＝70,７１＝71,７２＝72,７３＝73,７４＝74,７５＝75,７６＝76,７７＝77,７８＝78,７９＝79,８０＝80,８１＝81,８２＝82,８３＝83,８４＝84,８５＝85,８６＝86,８７＝87,８８＝88,８９＝89,９０＝90,９１＝91,９２＝92,９３＝93,９４＝94,９５＝95,９６＝96,９７＝97,９８＝98,９９＝99,１００＝100'};
function menu(sel){
for (i=0, seln=-1; i<sBox.length; i++){if (sBox[i]==sel) seln=i;}
if (seln>-1){
var selkey=sel.options[sel.selectedIndex].text;
if (selkey=='----') selkey='';
if (seln+1<sBox.length) set(seln+1,selkey);
}
}
function set(n,key){
var s=sBox[n]; var dat=[];
for (i=0; i<s.options.length; i++) s.options[0]=null;
if (key && iData[key]){
dat=('----,' + iData[key]).split(',');
for (i=0; i<dat.length; i++) s.options[i]=new Option(dat[i],s.name+'-'+i);
}
s.style.visibility=(dat.length)?'visible':'hidden';
if (n+1<sBox.length) set(n+1,'');
}
window.onload=function(){if (sBox=document.Form1.getElementsByTagName('select')) set(0,'全国');}
</script>
</head>
<body>
<form name="Form1" method="POST" action="test.php">
<select name="area" onChange="menu(this)" style="visibility:hidden"></select>
<select name="prefecture" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city1" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city2" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city3" onChange="menu(this)" style="visibility:hidden"></select>
<p>
<input type="reset" value="クリア" onclick="set(0,'全国')">
<input type="submit" value="送信">
</form>
</body>
</html>
お礼
ありがとうございます。 実行させる時に、「初期値に戻してから実行」とさせればよかったのですね。 助かりました。