ホームページ制作スタッフのブログ｜オフィス木蓮

プルダウンの選択で他の複数のプルダウンも選択させる

１つの select 文の選択で、他の複数の select 文も選択させる。

Ajax と PHP を JSON でつなげて実現。
まずは、HTML 部分

<p>
<select name="color" id="color">
<option value="0">▼選択</option>
<option value="blue">blue</option>
<option value="aqua">aqua</option>
<option value="lime">lime</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="black">black</option>
<option value="white">white</option>
</select> <select name="hex" id="hex">
<option value="0">▼選択</option>
<option value="00f">00f</option>
<option value="0ff">0ff</option>
<option value="0f0">0f0</option>
<option value="ff0">ff0</option>
<option value="f00">f00</option>
<option value="000">000</option>
<option value="fff">fff</option>
</select> <select name="rgb" id="rgb">
<option value="0">▼選択</option>
<option value="0,0,255">0,0,255</option>
<option value="0,255,255">0,255,255</option>
<option value="0,255,0">0,255,0</option>
<option value="255,255,0">255,255,0</option>
<option value="255,0,0">255,0,0</option>
<option value="0,0,0">0,0,0</option>
<option value="255,255,255">255,255,255</option>
</select>
</p>

次に javascript(jQuery) 部分

$(function(){
	$('#color').change(function(){
		$.ajax({
			type:"GET",
			url:"./select.php",
			dataType:"json",
			data:{"color":$("#color").val()},
			success:function(data){
				$('#hex').val( data[0] );
				$('#rgb').val( data[1] );
			}
		});
	});
});

最後に Ajax から呼び出している select.php。

if( isset( $_GET['color'] ) ){
	switch( $_GET['color'] ){
		case 'blue':
			$array = array( '00f', '0,0,255' );
			break;
		case 'aqua':
			$array = array( '0ff', '0,255,255' );
			break;
		case 'lime':
			$array = array( '0f0', '0,255,0' );
			break;
		case 'yellow':
			$array = array( 'ff0', '255,255,0' );
			break;
		case 'red':
			$array = array( 'f00', '255,0,0' );
			break;
		case 'black':
			$array = array( '000', '0,0,0' );
			break;
		case 'white':
			$array = array( 'fff', '255,255,255' );
			break;
		default:
			$array = array( 0, 0 );
	}
} else $array = array( 0, 0 );
echo( json_encode( $array ) );

実際には、HTML の option に並べる値や php で配列にさせる値をデータベース化して使うことが多いでしょう。

[mokurenCB]

staff

,