- ベストアンサー
プルダウンメニューのフォームについて
- プルダウンメニューのフォームに関する質問です。1回リロードするとデフォルトのメニューが選択されてしまう問題について解決方法を知りたいです。
- フォームでチョキを送信すると再読み込みにされて「グー」が表示されてしまう問題があります。これを送信後も連続でチョキを選択できる方法を教えてください。
- モードで「グーパー」を選んでいる場合にはチョキを選択できないようにしたいです。HTMLだけで実現する方法について教えてください。
- fanta350ml
- お礼率14% (3/21)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ページをまたいで値を保持するならCookieやサーバ側の処理を併用しないといけません。 phpを使える環境であれば、以下のようなソースで実現できると思います。 ようは送信されたデータをもとにselectedを付加する質問者様が言っているような方法です。 各optionの部分にて送信された$skillとの判断を行い、selected="selected"を出力します。 また、チョキを選択させない方法ですが、選んだ時に一度モードを送信すればそのモードにより表示するoptionの中からチョキを表示しないようにすればHTMLだけで実現可能です。 (HTMLだけというのは語弊がありますが、PHPにて出力する内容を変更しているので画面上はHTMLだけで実現します) 以下のサンプルはJavaScriptを併用してグーパが選択された場合にはチョキのoptionに対してdisabledを設定するようにし、選択できないようにしています。 ==== index.php <?php $skill = isset ( $_POST['skill'] ) ? $_POST['skill'] : null; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】プルダウンメニューのフォームについて</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript"> function modeChange ( mode ) { document.forms['janken'].elements['skill'].options[1].disabled = mode === 'gp'; } </script> <style type="text/css"> </style> </head> <body> <h1>プルダウンメニューのフォームについて(q7383144)</h1> <form name="janken" action="./" method="post"> モード <select name="mode" onchange="modeChange(this.value);"> <option value="janken">ジャンケン</option> <option value="gp">グーパー</option> </select> 手 <select name="skill" size="1"> <option value="goo"<?= $skill==='goo' ? print 'selected="selected"' : '' ?>>グー</option> <option value="choki"<?= $skill==='choki' ? print 'selected="selected"' : '' ?>>チョキ</option> <option value="par"<?= $skill==='par' ? print 'selected="selected"' : '' ?>>パー</option> </select> <input type="submit" value="送信"> </form> </body> </html> <!-- q7383144 -->
お礼
ありがとうございます。色々実験して、思い通りの処理が出来ました。 とても勉強になりました。