システムメンテナンスのお知らせ

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


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

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

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

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


以下ソースとなります。



<html>
<head>
<title>テストテスト</title>
<script language="JavaScript"><!--
menuItem = [ [ ],
["あああ","あああ2","あああ3","あああ4","あああ5"],
["いいい","いいい2"],
["ううう","ううう2","ううう3"],
["えええ","えええ2","えええ3","えええ4"] ];
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>

gooドクター

A 回答 (1件)

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


検証はしてないですが。

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

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

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

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

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

この回答への補足

<html>
<head>
<title>テストテスト</title>
<script language="JavaScript"><!--
menuItem = [ [ "--- 選択してください ---" ],
["--- 選択してください ---","あああ","あああ2","あああ3","あああ4","あああ5"],
["--- 選択してください ---","いいい","いいい2"],
["--- 選択してください ---","ううう","ううう2","ううう3"],
["--- 選択してください ---","えええ","えええ2","えええ3","えええ4"]
["--- 選択してください ---","おおお","おおお2","おおお3","おおお4","おおお5","おおお6"] ];
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&Aを見た人はこんなQ&Aも見ています

gooドクター

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

人気Q&Aランキング