「プルダウン」を教えてください!


htmlやjavascriptを勉強中です。
「プルダウン」について分からないことがあります。
検索してもうまく見つけられなかったので質問します。

例えば、↓のようなプルダウンがあったとして、

<FORM>
<p>レッスン選択</p>
<SELECT name="lesson">
<OPTION value="" selected>---選択してください---</OPTION>
<OPTION value="lesson1">レッスン1</OPTION>
<OPTION value="lesson2">レッスン2</OPTION>
<OPTION value="lesson3">レッスン3</OPTION>
<OPTION value="lesson4">レッスン4</OPTION>
</SELECT>
</FORM>

ページを開いたとき(選択前)は「---選択してください---」とでますよね。

その後ですが、
プルダウンで「レッスン2」を選択し、f5キーでページの更新をします。
再読み込みをしてもプルダウンの中は「レッスン2」のままで
最初の「---選択してください---」の表示はでてきません。

ページを更新するたびに、選択前の「---選択してください---」を
表示するには、どういった設定が必要でしょうか?

また、この場合<OPTION>にselectedの記述は必要なのでしょうか?
(意味があるのでしょうか?)


ほとんど独学で勉強しているので
よろしくお願いします。

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2012/05/09 12:15:07

ベストアンサー

id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493

回答1の"サーバを立てると初期化する"を確認してみましたが初期化されませんでした。

サーバ側でキャッシュをさせないヘッダーを送るか、JavaScriptでリセットする方法があると思います。

header('Cache-Control: no-store');
firefoxでのセレクトメニューの挙動(formのselectedについて) - heeha.ws::blog

Cache-Control:max-age=0とかも。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
onload = function() {
  document.forms[0].reset();
}
</script>
</head>
<body>
<FORM>
<p>レッスン選択</p>
<SELECT name="lesson">
<OPTION value="" selected>---選択してください---</OPTION>
<OPTION value="lesson1">レッスン1</OPTION>
<OPTION value="lesson2">レッスン2</OPTION>
<OPTION value="lesson3">レッスン3</OPTION>
<OPTION value="lesson4">レッスン4</OPTION>
</SELECT>
</FORM></body>
</html>

リセットではなく、読み込み時に任意の値を選択したい場合は、選択したいoption要素のselected属性にtrueなど値を入れる。

onload = function() {
  var o = document.getElementsByTagName('option');
  o[1].selected = true;
}
id:hanako_875

早速の回答ありがとうございます!
載せていただいたソースのJavaScriptで
リセットできました!!

本当は、連動させたプルダウンで使いたいのですが、
リセットできないのがずっと気になっていたんです。
スッキリしました!

Firefoxの仕様なのでしょうか?
IEでも初期化されなかったのですが…

PHPはまだ触れていないので今回はあきらめます。
もう少しいろいろ勉強してチャレンジしたいと思います。

ご丁寧にありがとうございました。

2012/05/02 14:41:32

その他の回答1件)

id:grankoyama No.1

回答回数560ベストアンサー獲得回数170

もしかして、使用しているブラウザはIEで、作ったHTMLファイルはWEB上にアップせずに
ローカルに置いて、ブラウザで開いてますか?
アドレスバーが『C:\Documents and Settings\dai\デスクトップ\test.html』みたいな感じで。

ためしに、IEでローカルのファイルを更新かけても、選択項目は変わりませんでした。
これをどこかにアップして、やってみれば結果が変わると思います。
ちなみに、わたしのブラウザ、chromeでは、ローカルファイルでも再読み込みしたら
きちんと選択項目は初期化されました。
WEBにアップしてないなら、してみるか別のブラウザ使って試してみては
いかがでしょうか?

無効な項目にselectedを設定することで、入力漏れを検出するとかいう意味では
必要なことだと思います。
初期項目がレッスン1だったら、選択するのを忘れてそのままレッスン1が選ばれたり
してしまうので。

id:hanako_875

早速の回答ありがとうございます!
ブラウザはFirefoxですが、ローカルで開いていました。
ですが、アップしても変わりませんでした;;

chromeでは初期化されたんですね。
でも普段chromeを使わないので
やはり他のブラウザでも初期化したいものです。

>初期項目がレッスン1だったら、選択するのを忘れてそのままレッスン1が選ばれたりしてしまう

なるほどです。
まだまだ学ぶことはたくさんありますね^^;
ご丁寧にありがとうございました。

2012/05/02 14:13:51
id:grankoyama

たしかに、Firefoxに関しては、再読み込みをしても選択項目が、選ばれたままであるのが
仕様のようなことを書いていた記事がありました。
初期化されるブラウザのほうが少数派なのかも。
覚えておいてくれたほうが便利なことも多いですから。ちゃんと確認せずに
回答してすみません。

セレクトタグの記述まわりをjavascriptで出力してみたらどうなるのだろうか……
などとも考えてみたり。

2012/05/02 14:44:55
id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493ここでベストアンサー

回答1の"サーバを立てると初期化する"を確認してみましたが初期化されませんでした。

サーバ側でキャッシュをさせないヘッダーを送るか、JavaScriptでリセットする方法があると思います。

header('Cache-Control: no-store');
firefoxでのセレクトメニューの挙動(formのselectedについて) - heeha.ws::blog

Cache-Control:max-age=0とかも。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
onload = function() {
  document.forms[0].reset();
}
</script>
</head>
<body>
<FORM>
<p>レッスン選択</p>
<SELECT name="lesson">
<OPTION value="" selected>---選択してください---</OPTION>
<OPTION value="lesson1">レッスン1</OPTION>
<OPTION value="lesson2">レッスン2</OPTION>
<OPTION value="lesson3">レッスン3</OPTION>
<OPTION value="lesson4">レッスン4</OPTION>
</SELECT>
</FORM></body>
</html>

リセットではなく、読み込み時に任意の値を選択したい場合は、選択したいoption要素のselected属性にtrueなど値を入れる。

onload = function() {
  var o = document.getElementsByTagName('option');
  o[1].selected = true;
}
id:hanako_875

早速の回答ありがとうございます!
載せていただいたソースのJavaScriptで
リセットできました!!

本当は、連動させたプルダウンで使いたいのですが、
リセットできないのがずっと気になっていたんです。
スッキリしました!

Firefoxの仕様なのでしょうか?
IEでも初期化されなかったのですが…

PHPはまだ触れていないので今回はあきらめます。
もう少しいろいろ勉強してチャレンジしたいと思います。

ご丁寧にありがとうございました。

2012/05/02 14:41:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません