javascriptでの2つのプルダウンメニューの初期値

解決済

質問者：cgicold
質問日時：2009/09/29 17:13
回答数：2件

下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、
その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。
そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。
そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。
そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。
何か良い方法がありましたらば教えて頂けませんでしょうか？

<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("selMain").onchange = function(){
var selNo = this.selectedIndex;
var selObj = document.getElementById("selSub");
var optionData = [
["国名を選択してください,"],
["東京,tokyo","大阪,osaka","名古屋,nagoya"],
["ニューヨーク,ny","ロサンゼルス,la"]
];
var i, tmp = [];
while(selObj.hasChildNodes()) {
selObj.removeChild(selObj.firstChild);
}
for (var i=0; i<optionData[selNo].length; i++){
tmp = optionData[selNo][i].split(",");
selObj.options[i] = new Option(tmp[0], tmp[1]);
}
}
}
</script>
</head>

<body>
<form action="./enq.cgi" method="get" id="mainForm" name="mainForm">
<select id="selMain">
<option value="" selected>国を選択してください</option>
<option value="jp">日本</option>
<option value="usa">アメリカ</option>
</select>
<select id="selSub">
<option value="">国を選択してください</option>
</select>
</form>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： imq
回答日時：2009/10/04 02:25

フォームの値は通常ならブラウザが記憶しているのですが、

「都市の選択」の方はロード時（JSで動的に追加する前）のoptionが1つしかないし、
そうでなくても動的にoptionを全部消しているし、
optionの値を書き換えただけでもリセットされるようなので、
cookieを使うしか方法はなさそうです。

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
仰られる通りcookieを使い方法しかなさそうですが、最初にアドバイスを頂いた方法でも十分期待通りの動作をしてくれるので助かりました。
教えて頂きありがとうございました。
また、質問させて頂いた時にはよろしくお願いします。

通報する

お礼日時：2009/10/06 18:33

No.1

回答者： imq
回答日時：2009/10/01 11:18

wondow.onloadの時にもonchangeの内容を実行すればいいと思います。

↓一例ですが

window.onload = function(){
var e, l;
(l = function(el) {
var selNo = el.selectedIndex;
var selObj = document.getElementById("selSub");
var optionData = [
["国名を選択してください,"],
["東京,tokyo","大阪,osaka","名古屋,nagoya"],
["ニューヨーク,ny","ロサンゼルス,la"]
];
var i, tmp = [];
while(selObj.hasChildNodes()) {
selObj.removeChild(selObj.firstChild);
}
for (var i=0; i<optionData[selNo].length; i++){
tmp = optionData[selNo][i].split(",");
selObj.options[i] = new Option(tmp[0], tmp[1]);
}
})(e = document.getElementById("selMain"));
e.onchange = function() { l(this); };
}

- 0
- 件

通報する

この回答へのお礼

ありがとうございます
教えて頂いた方法で希望通りの動作ができるようになりました！
ブラウザの戻るで戻ったり、onclick="history.back()"で入力画面に戻っても国名、都市名のプルダウンともに空白になることなく表示されました。
１点、教えて頂きたいのですが、onclick="history.back()"などで戻った場合、国名のプルダウンは先に選択した項目が表示されますが、都市名のプルダウンは一番上の都市（日本ならば東京、アメリカならニューヨーク）が表示されます。
これを国名のプルダウン同様に選択していたものを表示させることが可能なようならば、教えて頂けませんでしょうか？

通報する

お礼日時：2009/10/02 16:37

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