phpと連動させるには？

2009/09/13 14:44

このQ&Aのポイント

セレクトボックスの値を動的に変更する方法を教えてください。
大カテゴリーのセレクトボックスを選択すると、小カテゴリーのセレクトボックスが表示されるようにしたいです。
php ajaxでの方法や参考になるサイトがあれば教えてください。

dcx147
お礼率33% (214/636)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yuu_x
ベストアンサー率52% (106/202)

2009/09/13 18:34 回答No.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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 かなと、 # 全角でインデントが入れてあるので、タブ文字などに変換してください。

質問者

補足 2009/09/14 11:40

お返事ありがとうございます。なんとなくですがphpの場合jsonを使用するというのが一般的な傾向が見られたのですが jsonは全く触った事がないのでどう使うものかすらわかりませんでした^^; 詳しく例を教えて頂き大変参考になりました。1つ目のセレクトボックスを選んで2つ目を選びますよね。ここで2つ目を選択しているじょうたいで1つ目のセレクトボックスの値をデフォルトにすると 2つ目のセレクトボックスが消えなくても値をデフォルトにする事ってできませんでしょうか？現状ですと両者のセレクトボックスの値を選択し1つ目の値をデフォルトにしても2つ目の値はそのままになってしまいます。可能であれば方法を教えて頂けますと幸いです。