同一ページ遷移のformのselect要素について

前提・実現したいこと

下記のようなフォームを作成したいと思っています。

同一ページ遷移
select要素を選択したら自動的にsubmitする
選択したoptionのvalueを取得して表示する

調べながらソースを書いてみました。
動作はするものの下記のような問題があります。

「猫」が選択できない。（ = valueが取得できない）
「犬」や「うさぎ」を選択した場合、valueは取得できるが、プルダウンが「猫」に戻ってしまう。

こちらを解決するにはどのようにしたら良いのでしょうか。
どうぞ宜しくお願いします。

【補足】test.phpは現在のファイルです。

php
1<form action="/test.php/" method="get">
2	<select name="animal">
3		<option value="cat">猫</option>
4		<option value="dog">犬</option>
5		<option value="rabbit">うさぎ</option>
6	</select>
7</form>
8
9<?php
10if(isset($_GET['animal'])) {
11	print_r($_GET['animal']);
12} ?>

JavaScript
1$(function(){
2	$('select').change(function(){
3		$('form').submit();
4	});
5});

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じです

PHP
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('select').on('change',function(){
5    $(this).closest('form').trigger('submit');
6  });
7});
8</script>
9<?php
10$animal=filter_input(INPUT_GET,"animal");
11
12$selected["animal"]=["cat"=>"","dog"=>"","rabbit"=>""];
13$selected["animal"][$animal]=" selected";
14
15print <<<eof
16<form method="get">
17<select name="animal">
18<option value="">----</option>
19<option value="cat"{$selected["animal"]["cat"]}>猫</option>
20<option value="dog"{$selected["animal"]["dog"]}>犬</option>
21<option value="rabbit"{$selected["animal"]["rabbit"]}>うさぎ</option>
22</select>
23</form>
24eof;
25if(!is_null($animal)){
26  print htmlspecialchars($animal);
27}
28?>

※微調整しました

投稿2018/07/09 10:37

編集2018/07/09 10:43

yambejp

総合スコア114773

umauman

2018/07/09 11:06

ご丁寧なご回答ありがとうございます！恐らくヒアドキュメントやエスケープ処理などはセキュリティ上必要ということですよね.. 精進します。

行動規範の内容に同意します

html
1<?php
2ini_set('display_errors', true);
3error_reporting(E_ALL);
4?>
5<!DOCTYPE HTML>
6<html lang="ja">
7	<head>
8		<meta charset="UTF-8">
9		<title></title>
10	</head>
11	<body>
12		<form action="/testphp.php/" method="get">
13			<select name="animal">
14				<option value="cat" <?php if (filter_input(INPUT_GET, 'animal') == 'cat') { echo 'selected'; } ?>>猫</option>
15				<option value="dog" <?php if (filter_input(INPUT_GET, 'animal') == 'dog') { echo 'selected'; } ?>>犬</option>
16				<option value="rabbit" <?php if (filter_input(INPUT_GET, 'animal') == 'rabbit') { echo 'selected'; } ?>>うさぎ</option>
17			</select>
18		</form>
19		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
20		<script type="text/javascript">
21		$(function(){
22			$('select').change(function(){
23				$('form').submit();
24			});
25		});
26		</script>
27	</body>
28</html>