2008年の、当サイトでのQ&Aを拝見しまして、fujillinさんのご回答を参考に、プルダウンメニューを作っています。
一つの選択肢が100件以上必要なので、作りましたところ、100件以上のプルダウンを選択し他後、別の親選択肢を選ぶと、子のデーターに、先程の100件以上の選択肢が残って表示されてしまいます。
大変お手数ですが、javascript初心者なもので、どなたかご教授いただけますと、大変助かります。
以下は、fujillinさんオリジナルに、100件以上のデータを付け加えた、テストコードです。
<html>
<head>
<script>
var sBox=[];
var iData={'全国':'北海道地方,東北地方,関東地方,その他',
'北海道地方':'北海道',
'東北地方':'青森県,岩手県,宮城県',
'関東地方':'茨城県,栃木県,東京都',
'北海道':'函館市,札幌市,旭川市',
'岩手県':'盛岡市,宮古市,平泉市',
'東京都':'23区,武蔵野市,三鷹市,調布市,府中市',
'23区':'千代田区,中央区,港区,文京区,新宿区,渋谷区,台東区,墨田区',
'千代田区':'旭町,淡路町,飯田橋,内幸町,神田',
'その他':'1=1,2=2,3=3,4=4,5=5,6=6,7=7,8=8,9=9,10=10,11=11,12=12,13=13,14=14,15=15,16=16,17=17,18=18,19=19,20=20,21=21,22=22,23=23,24=24,25=25,26=26,27=27,28=28,29=29,30=30,31=31,32=32,33=33,34=34,35=35,36=36,37=37,38=38,39=39,40=40,41=41,42=42,43=43,44=44,45=45,46=46,47=47,48=48,49=49,50=50,51=51,52=52,53=53,54=54,55=55,56=56,57=57,58=58,59=59,60=60,61=61,62=62,63=63,64=64,65=65,66=66,67=67,68=68,69=69,70=70,71=71,72=72,73=73,74=74,75=75,76=76,77=77,78=78,79=79,80=80,81=81,82=82,83=83,84=84,85=85,86=86,87=87,88=88,89=89,90=90,91=91,92=92,93=93,94=94,95=95,96=96,97=97,98=98,99=99,100=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>
お礼
早速のご回答、ありがとうございます。 上記の変更をしましたところ、うまく作動しました。 ありがとうございました。 また、大変お手数ですが、長いプルダウンメ選択肢を表示させた後、その長いまま、次の選択肢が短くても、長い選択フィールドが表示されてしまう現象が出ました。選択フィールドの長さを初期化する方法を教えていただけませんでしょうか。 ご多用中、よろしくお願いします。 r58_on_job拝