プルダウンメニューって1回リロードするとデフォルトのメニュー
(一番上のメニュー、またはselected属性のメニュー)が選択されますよね。
たとえば、以下のフォームでチョキを一度「送信」すると、
再読み込みにされて「グー」が表示されてしまいます。
これを「送信」した後も「チョキ」を連続で選択できるようにしたいのですが良い方法はあるでしょうか?
(利用者が一旦別のページに飛んだ場合はデフォルトに戻っていいのですが・・)
---------------------------------------
<form method="post" action="janken.php">
モード
<select name="mode" size="1">
<option value="janken">ジャンケン</option>
<option value="gp">グーパー</option>
</select>
手
<select name="skill" size="1">
<option value="goo">グー</option>
<option value="choki">チョキ</option>
<option value="par">パー</option>
</select>
<input type="submit" value="送信">
</form>
以下、結果を出力するphp
-------------------------------------
htmlタグだけで実現可能でしょうか?
htmlで不可の場合、phpを使用するつもりですが、
if文で一つ一つのメニューに「前回コレを送信していたら選択」というのが思い浮かびますが、
もっとスマートなやり方はあるでしょうか?
別の質問になりますが、モードで「グーパー」を選んでいる時はチョキを選択できないようにしたいのですが、これはhtmlだけでは実現不可能でしょうか?
よろしくお願いいたします。
No.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-transitio …
<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 -->
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
プルダウンメニューがプルアップに
-
セレクトメニューで2つの項目...
-
複数列を持ったリストボックス...
-
テーブル内でドロップダウンメ...
-
セレクトボックスを非表示にし...
-
プルダウンメニューのボタンの...
-
ドロップダウンリストの表示に...
-
同じものを繰り返し表示させる
-
プルダウンメニューで中央表示
-
<SELECT>タグの折り返し
-
selectタグ内の特定のoptionの...
-
プルダウンリストの背景色の指定
-
select boxとinput valuの連動
-
セレクトボックスのselected属...
-
Application.ScreenUpdating = ...
-
JSONで文字列が長い時
-
FindFirst を複数条件で検索
-
数値かどうかの判定方法
-
C言語について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
セレクトメニューで2つの項目...
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
セレクトボックスの「選択して...
-
セレクトボックスから別窓にジ...
-
SELECT OPTIONの中身をコピペ...
-
プルダウンリストの背景色の指定
-
セレクトボックスの中を一部隠...
-
セレクトメニューで選んだ値を...
-
メールアドレスの存在のチェッ...
-
同じものを繰り返し表示させる
-
セレクトボックスである項目を...
-
プルダウンメニューのボタンの...
-
SELECT要素の垂直位置
-
html select optionが左寄せに...
-
ドロップダウンリストのselecte...
-
プルダウンメニューで中央表示
おすすめ情報