プロが教える店舗＆オフィスのセキュリティ対策術

ブラウザの戻るボタンを押したときのデータの保持の仕方

解決済

  • 質問者：animack
  • 質問日時：
  • 回答数：1件

頻繁に書き込みして申し訳ありません。
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。


前回セレクトメニューについて教えて頂いたのですが、今回もセレクトメニューに関しての質問です。

ＩＥでの話なのですが、セレクトメニュー１・２を選択しsubmitボタンで次のページに行き、
ブラウザの戻るボタンで戻ってきたときにセレクトメニュー２の方のデータ（value）だけ保持できていません。
前にＩＥはそのような仕様だという話を聞いたのですが、その時もこちらで質問させてもらいました。
その時はselectタグにidを仕込んでおき、「window.onload」でgetElementByIdを使用するやり方を
教わったのですが、今回はそれでうまくいきません。

ネットで検索していてcookieを使用してデータを保持しておくというやり方も見かけたのですが、
一番効率のよいやり方はどのようなものになるのでしょうか。

どうかよろしくお願いします。


以下ソースとなります。



<html>
<head>
<title>テストテスト</title>
<script language="JavaScript"><!--
menuItem = [ [ ],
["あああ","あああ２","あああ３","あああ４","あああ５"],
["いいい","いいい２"],
["ううう","ううう２","ううう３"],
["えええ","えええ２","えええ３","えええ４"] ];
function clearOption(len){
var i;
for (i=0; i<len; i++){
document.aaa.bbb.options[i] = null;
}
}

function setMenuItem(n){
optlen = document.aaa.bbb.options.length;
while(optlen > 0){
clearOption(optlen);
optlen = document.aaa.bbb.options.length;
}

if (menuItem[n].length > 0){
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<=4; j++ ){
if( document.aaa.Maker.selectedIndex == [j] ){
document.aaa.bbb.options[i].value = i+([j]*10);
}
}
}
}
}
window.onload = function(){
setMenuItem(document.getElementById('q1').value);
//alert(document.getElementById('q2').value);
}
// --></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" id="q2">
<option value="" selected>--- 選択してください ---</option>
</select>
<input type="submit" name="ok" vakue="ok">
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： mizuno3
  • 回答日時：

ブラウザによって動作が変わってしまいそうな気がしますね。


検証はしてないですが。

どなたかが仰るように、クッキーで値を変えてあげると良いかも知れませんね。

cookieなんですが、この情報はjavascriptの方で取得してあげる必要があります。
javascriptでは、document.cookieでドメイン上のcookieが取得できると思うので、取得した後parserなどの関数を用意して必要な値を得る必要があると思います。

cookieの発行はsubmit後のページで、サーバーサイドから出してあげた方が良いと思います。

ただ、戻るの動作によってはページの表示自体がおかしくなりそうな気もしますね。

上手く動いたら教えてください！

この回答への補足

<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>

補足日時：2008/05/16 21:23
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

コメントありがとうございます。

やはりクッキーを使用したほうが良いみたいですね。
そこでネットで調べ上げて試してみたところ、思ったとおりの動作をするようになりました！
今のところ不具合もなく動作しています。

もっとスマートに書けそうな気もしますが・・・；


とりあえずこんな感じですよということで、コードを付けておきます！

通報する
お礼日時：2008/05/16 21:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報