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の"サーバを立てると初期化する"を確認してみましたが初期化されませんでした。
サーバ側でキャッシュをさせないヘッダーを送るか、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; }
もしかして、使用しているブラウザはIEで、作ったHTMLファイルはWEB上にアップせずに
ローカルに置いて、ブラウザで開いてますか?
アドレスバーが『C:\Documents and Settings\dai\デスクトップ\test.html』みたいな感じで。
ためしに、IEでローカルのファイルを更新かけても、選択項目は変わりませんでした。
これをどこかにアップして、やってみれば結果が変わると思います。
ちなみに、わたしのブラウザ、chromeでは、ローカルファイルでも再読み込みしたら
きちんと選択項目は初期化されました。
WEBにアップしてないなら、してみるか別のブラウザ使って試してみては
いかがでしょうか?
無効な項目にselectedを設定することで、入力漏れを検出するとかいう意味では
必要なことだと思います。
初期項目がレッスン1だったら、選択するのを忘れてそのままレッスン1が選ばれたり
してしまうので。
早速の回答ありがとうございます!
ブラウザはFirefoxですが、ローカルで開いていました。
ですが、アップしても変わりませんでした;;
chromeでは初期化されたんですね。
でも普段chromeを使わないので
やはり他のブラウザでも初期化したいものです。
>初期項目がレッスン1だったら、選択するのを忘れてそのままレッスン1が選ばれたりしてしまう
なるほどです。
まだまだ学ぶことはたくさんありますね^^;
ご丁寧にありがとうございました。
たしかに、Firefoxに関しては、再読み込みをしても選択項目が、選ばれたままであるのが
仕様のようなことを書いていた記事がありました。
初期化されるブラウザのほうが少数派なのかも。
覚えておいてくれたほうが便利なことも多いですから。ちゃんと確認せずに
回答してすみません。
セレクトタグの記述まわりをjavascriptで出力してみたらどうなるのだろうか……
などとも考えてみたり。
回答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; }
早速の回答ありがとうございます!
載せていただいたソースのJavaScriptで
リセットできました!!
本当は、連動させたプルダウンで使いたいのですが、
リセットできないのがずっと気になっていたんです。
スッキリしました!
Firefoxの仕様なのでしょうか?
IEでも初期化されなかったのですが…
PHPはまだ触れていないので今回はあきらめます。
もう少しいろいろ勉強してチャレンジしたいと思います。
ご丁寧にありがとうございました。
早速の回答ありがとうございます!
2012/05/02 14:41:32載せていただいたソースのJavaScriptで
リセットできました!!
本当は、連動させたプルダウンで使いたいのですが、
リセットできないのがずっと気になっていたんです。
スッキリしました!
Firefoxの仕様なのでしょうか?
IEでも初期化されなかったのですが…
PHPはまだ触れていないので今回はあきらめます。
もう少しいろいろ勉強してチャレンジしたいと思います。
ご丁寧にありがとうございました。