スタッフブログ
プルダウンの選択で
他の複数の
プルダウンも
選択させる
1つの select 文の選択で、他の複数の select 文も選択させる。
Ajax と PHP を JSON でつなげて実現。
まずは、HTML 部分
<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>
次に 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 で配列にさせる値をデータベース化して使うことが多いでしょう。
ホームページ制作を承ります
相模原市にある会社・店舗・事務所様からのご依頼大歓迎!
- 【士業】
- 弁護士(法律事務所),公認会計士,税理士,司法書士,行政書士,社会保険労務士など
- 【住まい】
- 不動産,工務店,建設・建築会社,設計事務所,リフォーム会社,建物管理会社,電気工事,水道工事など
- 【乗り物】
- 中古車ショップ,バイクショップ,自転車ショップ,自動車整備,運転代行など
- 【飲食業】
- レストラン,カフェ,甘味処,洋菓子店,パン屋など
- 【医療・福祉】
- 病院,クリニック,歯科医,整体院,接骨院,介護センターなど
- 【美容・健康】
- トレーニングジム,エステサロン,ネイルサロン,美容院,美容室など
- 【教育・育児】
- 専門学校,学習塾,幼稚園,保育園,認定保育園,カルチャースクール,パソコン教室など
- 【その他】
- イベントサイト,産業廃棄事業,リサイクルショップ,雑貨店,ペットショップ,旅館,楽天市場店舗・Yahoo!ストア・MakeShopなど
- 【外注元】
- デザイン事務所、広告代理店、ホームページ制作会社など
上記以外の業種でもホームページ制作・WEBシステム/アプリケーション開発につきましては、神奈川県相模原市中央区にあるオフィス木蓮までお気軽にご連絡・お問い合わせください。スマートフォン・タブレット対応、WordPress によるホームページ制作もお任せ下さい。他社が制作されたホームページでも対応します。また、ウェブアクセシビリティ(Webアクセシビリティ)対応のご相談も承ります。