selectタグで一個選ぶたび選択肢が変わる仕組み

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>");
      }
    }
}