人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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の記述は必要なのでしょうか?
(意味があるのでしょうか?)


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


●質問者: hanako_875
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● グラ娘。

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

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

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


hanako_875さんのコメント
早速の回答ありがとうございます! ブラウザはFirefoxですが、ローカルで開いていました。 ですが、アップしても変わりませんでした;; chromeでは初期化されたんですね。 でも普段chromeを使わないので やはり他のブラウザでも初期化したいものです。 >初期項目がレッスン1だったら、選択するのを忘れてそのままレッスン1が選ばれたりしてしまう なるほどです。 まだまだ学ぶことはたくさんありますね^^; ご丁寧にありがとうございました。

グラ娘。さんのコメント
たしかに、Firefoxに関しては、再読み込みをしても選択項目が、選ばれたままであるのが 仕様のようなことを書いていた記事がありました。 初期化されるブラウザのほうが少数派なのかも。 覚えておいてくれたほうが便利なことも多いですから。ちゃんと確認せずに 回答してすみません。 セレクトタグの記述まわりをjavascriptで出力してみたらどうなるのだろうか…… などとも考えてみたり。

2 ● Cherenkov
ベストアンサー

回答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;
}

hanako_875さんのコメント
早速の回答ありがとうございます! 載せていただいたソースのJavaScriptで リセットできました!! 本当は、連動させたプルダウンで使いたいのですが、 リセットできないのがずっと気になっていたんです。 スッキリしました! Firefoxの仕様なのでしょうか? IEでも初期化されなかったのですが… PHPはまだ触れていないので今回はあきらめます。 もう少しいろいろ勉強してチャレンジしたいと思います。 ご丁寧にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ