formのselectタグで、一個選ぶたびに、後の選択肢が変わるっていう仕組みをやってみたので、発見した事をかいつまんで記載します。ただこれ、多次元配列みたいにしないとダメじゃん?、とか、待って選択肢かぶってるやつでるのおかしい**とか、これ何個も書くの大変すぎる××^とか、実際はこれじゃあ使えないヨっ!形になったはなったけど、これは使えない、配列みたいにしないと無理かも〜^^^^^っていうのがわかっただけでもよかったかなー。
とりあえず、selectタグにclickイベントを付与する
これをやってて発見したんですが、macのchromeだと、selectタグにclickイベント付与できないんですね。windowsのchromeだと動くのに、macだと動かないって現象が起きて(会社では動いたのに、家に帰ったらまた動いてない、しょほん)、すごく困りました。
// $(".select").live("click", function(){ // 上のだとmacのchromeで動かない $("select").bind(($.browser.msie ? "click" : "change"), function(){ //ここに処理 });
そして、ajax通信を使って、ページを更新しないで表示に変更を加えるようにする
一個選ぶたびにoptionの表示内容を変えていくので、ajax通信を使います。そうしないとページのPV数がガンガンあがっていっちゃいますからね。PV数無視してるよっていう心意気のあるページならphpのformで普通にsubmit実行させてできちゃうと思います。
$.ajax({ type: 'post', url: 'post.php', data: { 'os': choos, 'carrire': chocarrire, 'maker': chomaker }, success: function(data){ //ここにajax通信が成功した時の処理 //ここでは選んだやつをdiv#choiceに表示するようにしています $("#choice").html(data); } });
処理をおこなう(データを受けとる)post.phpはこちら。
<?php /* POSTで届くので $_POSTを使って好きに処理する */ if ( isset($_POST["os"]) && isset($_POST["carrire"]) && isset($_POST["maker"]) ) { $text = "<div class='reos'>".$_POST['os']."</div><div class='recarrire'>".$_POST['carrire']."</div><div class='remaker'>".$_POST['maker']."</div>"; } /* echo文で出力するものがjsで受け取るときのdataになります */ echo $text; ?>
あとは、選択したデータによって条件文でoptionの内容を変更していく、のをひたすら書く
選択したデータはdiv#choiceに表示させるので、それによってoptionを変更するようにしました。そのとき、今現在選んでるものと、optionでappendしていくときの選択肢が同じだったら、selectedを付与するように分岐させときます。
// 選択肢用の配列を用意 var maker_ls_ios = Array( "iPhone", "iPad", "iPod touch" ); // osがiosの場合 if ( $("#choice .reos").text() == "iOS" ) { // carrireの選択肢をappend $("#frmex2 select").empty(); $("#frmex2 select").append("<option>----------</option>"); // makerの選択肢をappend $("#frmex3 select").empty(); $("#frmex3 select").append("<option>----------</option>"); var params = $("#choice .remaker").text().split("_"); for ( var i = 0; i < maker_ls_ios.length; i++) { if ( i == params[2] ) { $("#frmex3 select").append("<option name='maker_ios_" + i +"' value='maker_ios_"+ i +"' selected='selected'>" + maker_ls_ios[i] + "</option>"); } else { $("#frmex3 select").append("<option name='maker_ios_" + i +"' value='maker_ios_"+ i +"'>" + maker_ls_ios[i] + "</option>"); } } }
みたいにひたすら書いてできたサンプルがこれ(でもこれ途方もない道のりだから実際使えないヨ)
やっぱり、選択肢を多次元配列で用意するべきかもしれない・・・!そもそもやっぱりphpで組んで、通信の部分だけajax使ったら良い気がしてきた。