phpと連動させるには？

解決済

質問者：dcx147
質問日時：2009/09/13 14:44
回答数：3件

セレクトボックスの値を動的に変更させたいと思っております。

1・大カテゴリーのセレクトボックスのみ表示
2・大カテゴリーのセレクトボックスからいずれかを選択
3・大カテゴリーのセレクトボックスが選択されたら小カテゴリーのセレクトボックスを表示
4・小カテゴリーのセレクトボックスからいずれかを選択

一般的なものかと思うのですが実現したいのは上記の通りです。

動的に変更する値はdbから取得した配列で以下のような形式になるかと思います。

$max_cate[1] = '大カテゴリー1';
$max_cate[2] = '大カテゴリー2';
$max_cate[3] = '大カテゴリー3';

$min_cate[1][1] = '小カテゴリー1_1';
$min_cate[1][2] = '小カテゴリー1_2';
$min_cate[1][3] = '小カテゴリー1_3';
$min_cate[2][1] = '小カテゴリー2_1';
$min_cate[2][2] = '小カテゴリー2_2';
$min_cate[2][3] = '小カテゴリー2_3';
$min_cate[3][1] = '小カテゴリー3_1';
$min_cate[3][2] = '小カテゴリー3_2';
$min_cate[3][3] = '小カテゴリー3_3';

大カテゴリーのキーと小カテゴリーのキーが紐づく形式で考えております。

方法が全くわからず『php ajax』で検索してみましたが参考になるようなものがみつからず質問させて頂きました。

参考程度でも構いませんので具体的な方法か参考になるサイトがありましたら是非教えて頂けないでしょうか？

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yuu_x
回答日時：2009/09/13 18:34

<!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>
　<title></title>
<script type="text/javascript">
//@cc_on
function createXMLHTTP( ) {
　/*@if(1)
　try {
　　return new ActiveXObject ('Msxml2.XMLHTTP.6.0');
} catch (err1) {
　try {
　　return new ActiveXObject ('Msxml2.XMLHTTP.3.0');
　} catch (err) { ; }
}
@else@*/
try {
return new XMLHttpRequest;
} catch (err) { ; }
/*@end@*/
return null;
}

function changeListener( evt ) {
　var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
　
　if( target.name == 'CATEGORY' ) {
　　subCateRequest( target.form, target, target.form.elements['REQUEST_URI'].value, target.name, target.value );
　}
}

function subCateRequest( form, cate, uri, name, value ) {
　var req = createXMLHTTP();
　var query = encodeURIComponent( name ) + '=' + encodeURIComponent( value );
　var json;
　
　if( req ) {
　　req.open( 'GET', uri + '?' + query, true );
　
　　req.onreadystatechange = function() {
　　　if( req.readyState == 4 ) {
　　　　try{
　　　　　if( req.status == 200 ) {
　　　　　　json = decodeURIComponent( req.responseText );
　　　　　　json && makeSubCate( form, cate, eval( json ) );
　　　　　}
　　　　}catch(e){
　　　　　;
　　　　}finally{
　　　　　req.onreadystatechange = new Function();
　　　　　form = cate = uri = name = value = null;
　　　　　req = query = json = null;
　　　　}
　　　}
　　};
　
　　req.send( '' );
　}
}

function makeSubCate( form, cate, items ) {
　var subCate;
　var doc = form.ownerDocument || document;
　var i, option;
　　
　if( 'undefined' == typeof form.elements[ 'SUB_CATEGORY' ] ) {
　　subCate = doc.createElement( /*@if(1) '<select name="SUB_CATEGORY">' @else@*/ 'SELECT' /*@end@*/ );
　　subCate.name = 'SUB_CATEGORY';
cate.parentNode.appendChild( subCate );
　} else {
　　subCate = form.elements[ 'SUB_CATEGORY' ];
　　subCate.innerHTML = '';
　}
　
　for( i=0; i<items.length; i++ ) {
　　option = doc.createElement( 'OPTION' );
　　option.value = i;
　　i == 0 && ( option.selected = true );
　　option.appendChild( doc.createTextNode( items[ i ] ) );
　　subCate.appendChild( option );
　}
}

</script>
</head>
<body>
<form action="#">
　<p>
　　<input type="hidden" value="./test.php" name="REQUEST_URI">
　　<select name="CATEGORY" onchange="changeListener( event );">
　　　<option value="0" selected="selected">none</option>
　　　<option value="1">カテゴリー１</option>
　　　<option value="2">カテゴリー２</option>
　　　<option value="3">カテゴリー３</option>
　　</select>
　</p>
</form>
</body>
</html>

=========== test.php ==============
<?php
　$min_cate = Array(
　　Array(
　　　'',
　　　'',
　　　'',
　　　''
　　),
　　Array(
　　　'none',
　　　'小カテゴリー1_1',
　　　'小カテゴリー1_2',
　　　'小カテゴリー1_3'
　　),
　　Array(
　　　'none',
　　　'小カテゴリー2_1',
　　　'小カテゴリー2_2',
　　　'小カテゴリー2_3'
　　),
　　Array(
　　　'none',
　　　'小カテゴリー3_1',
　　　'小カテゴリー3_2',
　　　'小カテゴリー3_3'
　　)
　);
　
　if( isset( $_GET ) && $_GET[ 'CATEGORY' ] ) {
　　header( 'Contet-Type: text/plane; charset=UTF-8' );
　　$json = '["'.implode( '","', $min_cate[ $_GET[ 'CATEGORY' ] ] ).'"]';
　　echo rawurlencode( mb_convert_encoding( $json, 'UTF-8', 'EUC-JP' ) );
　}
?>

やってることは、GET で飛ばして、JSON で受け取ってるだけです。
request 部分は、手書きでも、jQurey でも、prototype でも、お好きなものを。
受け取りも、JSON に限らず、XML でも。データを受け取るだけだから、JSON かなと、

# 全角でインデントが入れてあるので、タブ文字などに変換してください。

この回答への補足

お返事ありがとうございます。
なんとなくですがphpの場合jsonを使用するというのが一般的な傾向が見られたのですが
jsonは全く触った事がないのでどう使うものかすらわかりませんでした^^;

詳しく例を教えて頂き大変参考になりました。1つ目のセレクトボックスを選んで2つ目を選びますよね。

ここで2つ目を選択しているじょうたいで1つ目のセレクトボックスの値をデフォルトにすると
2つ目のセレクトボックスが消えなくても値をデフォルトにする事ってできませんでしょうか？

現状ですと両者のセレクトボックスの値を選択し1つ目の値をデフォルトにしても2つ目の値は
そのままになってしまいます。

可能であれば方法を教えて頂けますと幸いです。

補足日時：2009/09/14 11:40

通報する