リロード、post back時の初期表示値

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: おがわ : 2005/04/19 11:46
都道府県を選択させたいと思い、以下のようなソースを記述しました。

コンボボックス1:北海道、東北、関東・・などの地方名を表示するコンボボックス
     onChange イベントで、コンボ2に対応する都道府県のみを表示します。
コンボボックス2:北海道、青森、岩手・・などの都道府県を表示するコンボボックス

ところが、リロード或いはブラウザの戻る等を使って再度ページを表示
させた時に予期しない結果となりました。コンボボックス1はリロード前の値を保持
しているのですが、コンボボックス2はコンボボックスの内容が初期化されてしまうのです。

これはなぜなのでしょうか。また、リロード時に2の内容も保持したい場合は
どうすればよいのでしょうか。

1   名前: おがわ : 2005/04/19 11:46
以下実際のソースです。解りにくくて申し訳有りません。
----</head>----
var getlid=0;
var getpid=0;
var lnum=2;
lidlist = new Array(lnum);
lnamelist = new Array(lnum);
lidlist[0] = "1";
lidlist[1] = "2";
lnamelist[0] = "北海道";
lnamelist[1] = "東北";

var pnum=5;
lpidlist = new Array(pnum);
pidlist = new Array(pnum);
pnamelist = new Array(pnum);
lpidlist[0] = "1";
lpidlist[1] = "2";
lpidlist[2] = "2";
lpidlist[3] = "2";
lpidlist[4] = "2";
pidlist[0] = "1";
pidlist[1] = "2";
pidlist[2] = "3";
pidlist[3] = "4";
pidlist[4] = "5";
pnamelist[0] = "北海道";
pnamelist[1] = "青森県";
pnamelist[2] = "岩手県";
pnamelist[3] = "宮城県";
pnamelist[4] = "秋田県";
function ch_lb(fm)
{
var selv = fm.lid.options[fm.lid.selectedIndex].value;
var pcount=0;
for(i=0; i<pnum; i++){
if(selv==lpidlist[i]){
pcount++;
}
}
fm.pid.length = pcount+1;
pcount=1;
fm.pid.options[0].text="---";
fm.pid.options[0].value="";
for(i=0; i<pnum; i++)
{
if(selv==lpidlist[i]){
fm.pid.options[pcount].text=pnamelist[i];
fm.pid.options[pcount].value=pidlist[i];
if(pidlist[i]==getpid){fm.pid.options[pcount].selected;}
pcount++;
}
}
}
----</head>----

2   名前: おがわ : 2005/04/19 11:46

----<body>----
document.write('<select name="lid" onChange="ch_lb(this.form);">');
for(i=0; i<lnum; i++)
{
if(lidlist[i]==getlid){
document.write('<option value="' + lidlist[i] + '" selected>' + lnamelist[i]);
}
else{document.write('<option value="' + lidlist[i] + '">' + lnamelist[i]);}
}
document.write('</select>');

if(getlid==0){ getlid = lidlist[0];}
if(getpid==0){ getpid = pidlist[0];}
document.write('<select name="pid">');
document.write('<option value="0">---');
for(i=0; i<pnum; i++)
{
if(lpidlist[i]==getlid){
if(pidlist[i]==getpid){ document.write('<option value="' + pidlist[i] + '" selected>' + pnamelist[i]); }
else{ document.write('<option value="' + pidlist[i] + '">' + pnamelist[i]);}
}
}
document.write('</select>');
----</body>----

3   名前:  U D  : 2005/04/19 11:46
onLoadを使ってみてはいかがでしょうか?
ページがロードされた時に初期化なり保持なりをそれでできるかと。

http://www.tohoho-web.com/js/onevent.htm#onLoad
戻る等の時にもonLoadが適用されるかよく覚えていないので不正確ですが、
ま、できなかったらまた考えますんで。。。

4   名前: おがわ : 2005/04/19 11:46
onLoad を使用しても、Javascriptでのグローバル変数はクリアされるのではないでしょうか。
また、現在onLoadは使用していませんが、それだとコンボボックス1の値が
保持されていて、コンボボックス2の値が破棄される理由がわかりません。

5   名前:  U D  : 2005/04/19 11:46
<head>
<SCRIPT type="text/javascript">
<!--
lnamelist = new Array(2)
lnamelist[0]=new Array(4)
lnamelist[0][0]="三重";
lnamelist[0][1]="愛知";
lnamelist[0][2]="岐阜";
lnamelist[0][3]="";
lnamelist[1]=new Array(4)
lnamelist[1][0]="愛媛";
lnamelist[1][1]="あれ?";
lnamelist[1][2]="高知";
lnamelist[1][3]="徳島";
function test(doc){
for(i=0;i<doc.S2.length;i++){
doc.S2.options[i].text=lnamelist[doc.S1.selectedIndex][i];
}
}
//-->
</SCRIPT>
</head>
<body onLoad="test(document.F1)">

<FORM name="F1">
<select name="S1" onchange="test(this.form);">
<option>東海</option>
<option>四国</option>
</select>
<select name="S2">
<option>三重</option>
<option>愛知</option>
<option>岐阜</option>
<option></option>
</select>
</FORM>
</body>

6   名前:  U D  : 2005/04/19 11:46
例えばこのようにできると思うんですね。はい。
少なくともコンボ2の問題回避はこんな感じでできてますよね。

グローバル変数ですが…まぁちゃんと表示できているしいいんでは(おぃ
おそらくある程度は記憶されているのではないかと。。。
IEのバグとかもありうるのでちゃんと調べないといけないですね。
他のブラウザでチェックしてないので他は分かりません。

それと、>>1-2のではエラーになりましたよ。(これもIEでしか確認してないけど
自分的にフォーム類をドキュメントライトで書き出すのはあまり良くないかと…

けっこう即席なのでちゃんと直さないといけない所とかがあると思うけど
まぁ記述力自体はありそうなので自分で調整してみてください。

…時間があまり無い故また。

7   名前: おがわ : 2005/04/19 11:46
U D 様

サンプル有難うございます。確かに作っていただいたサンプルでは
意図した通りの動作が出来ているようですね。
これを参考に手前のソースを修正して、
後ほど結果をご報告させて頂きます。

グローバル変数がクリアされる等の点については、
私も意図通り動けば深く追求する意思はあまりないので
気にしない事にします。
(今回の件では特にブラウザのキャッシュ等に残されている
情報をあてにしているという点で信頼に欠けますので)

まずは御返事まで。有難うございました。

一覧へ戻る