UNIRRY

WEBデザインとホロスコープと宇宙のブログ

formのselect部分で一個選ぶたびに選択肢が変わる仕組みをつくる

frmoption

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使ったら良い気がしてきた。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3