2015年05月09日

PHP に URL から値を渡して、その値を元にしてコンボボックスの OPTION 要素を選択する3つの方法

こんな感じのコンボボックスでは、PHP や JavaScript で何もしないと、表示された時に選択されるのは、一行目のオプション内容です。これを $_GET["php_file"] の内容によって、表示した時の対象オプションを変更する事ができます
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

方法その1

以下のようなリンクから表示すると、コンボボックスは2行目のオプションを選択して表示されます

http://winofsql.jp/php/basic/log_03.php?php_file=log_02b.php

▼ 三項演算子を使ったとても解りやすいコード
<select id="action_file"
	name="php_file">
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02a.php" ? "selected" : "" ?> >連結演算子で文字列の連結
	</option>
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02b.php" ? "selected" : "" ?> >文字列内に変数を埋め込んで連結
	</option>
</select>

これは、HTML の中に直に埋め込む上に、条件の判断を OPTION 要素の中の一行一行で完結してしまう方法です。具体的には、php_file=log_02b.php で渡された内容に基づいて、log_02b.php の OPTION 要素のみ selected を記述してブラウザに選択させます

方法その2

jQuery に選択させる方法です。選択の条件の元となる文字列のみ PHP で埋め込んでおいて、その文字列を使って jQuery で処理します。これは、PHP と JavaScript の連携プレイなので、それぞれの扱いを良く知った上で利用する必要があります。

http://winofsql.jp/php/basic/log_04.php?php_file=log_02b.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=600,initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	// 初期処理
	if ( "<?= $_GET["php_file"] ?>" != "" ) {
		$("#action_file").val("<?= $_GET["php_file"] ?>");
	}

	// コンボボックスの選択されたテキストをテキストエリアにセットする
	$("#set_text").click(function(){
		$("#text").val( $("#action_file option:selected").text() );

	});

});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>

</body>
</html>


方法その3

PHP コードを埋め込んで、配列を作ってループ処理で行う方法ですが、HTMLの中を虫食いのように PHP の実行処理を埋め込むのは、いろいろな意味でおすすめできません。見ただけでも見にくいし解り難くなっているのが解ります。

http://winofsql.jp/php/basic/log_05.php?php_file=log_02b.php

この方法の延長上である開発として納得の行く方法はありますが、PHP に慣れていないうちはまだまだ考える必要はありません。
<?php
	// 配列変数に、OPTION 要素用の値の一覧を作成しておく
	$options = array(
		"log_02a.php" => "連結演算子で文字列の連結",
		"log_02b.php" => "文字列内に変数を埋め込んで連結"
	);
?>
<select id="action_file"
	name="php_file">
<?php
	foreach( $options as $k => $v ) {
		print "<option value=\"";
		print $k;
		print "\"";
		if ( $_GET["php_file"] == $k ) {
			print " selected";
		}
		print ">";
		print $v;
		print "</option>\n";
	}
?>
</select>


最も容易なのは『方法その1』です

もちろん、この方法がベストというわけではありませんが、WEB アプリケーションを知る為にはできる限り簡潔にソースコードが記述されるほうが望ましいです。テクニックに走りすぎると、その時はいいかもしれませんがしばらく時間が空くと、自分で書いたのに良く解らない事がプロでもあります。知らない事が多い時点では、見える範囲はできるだけ狭くしましょう。




タグ:PHPの基本
posted by at 2015-05-09 17:52 | 処理 | このブログの読者になる | 更新情報をチェックする