RSS

JQueryでドロップダウンリストにデータを表示

24 1月

よくあるやつですね。
やりたいこと。cakephp上で(あまりcakeは関係ないかもだ)

  • parentドロップダウンリストを選択したら、childドロップダウンリストに値をいれる
  • childデータは非同期通信したい
  • 前準備として、以下。

    		echo $javascript->link('jquery-1.3.2.min.js');
    

    レシピ1:childrenのデータを取得するメソッドをコントローラーに記述する。

    	function admin_getchild($id)	{
    		$list_data = $this->Child->findAllByParentId($id,null,'id');
    		echo json_encode($list_data);
    		$this->autoRender = false;		
    	}
    

    レシピ2:view側に、

  • Parentドロップダウンリストの値が変更されたら、コントローラ側のメソッドを呼ぶ関数を作成
  • リストデータを取得したら、それをDOM操作でオプションにセットする
  • というもの。前回のテーブルの操作とほぼ同じなので、習ってやってみる。

    <script type="text/javascript">
     $(document).ready(function() {
    //親ドロップダウンリストの変化キャッチしてコントローラーのメソッド呼び出し
    //getchild()の引数には選択した親のドロップダウンリストのIDが入ってくる
          $("#Parent").change(function() {
        	    $.getJSON("../getchild/"+$(this).val(), function(data) {
        	    	disp_detail_list(data);
        	    });
        	  });
     });
    function disp_detail_list(data) {
    // 一度、要素を一度すべて削除する
      $("#Child option").remove();
    //取得したデータを子リストのoptionとして登録する
      for (i in data){
       var option = $("<option>").val(data[i]['Child']['id']).text(data[i]['Child']['name']);
       $("#Child").append(option);
      }
    }
    

    レシピ3:うんで、ビュー側には

    <div class="parent">
    	<label class="label">親リスト</label>
    <?php echo $form->input('ParentId',array('div'=>false,'label'=>false,
    'type'=>'select','options'=>$parent,'id'=>'Parent'))?>
    </div>
    <div class="child">
    	<label class="label">子リスト</label>
    <?php echo $form->input('ChildId',array('div'=>false,'label'=>false,
    'type'=>'select','options'=>'','id'=>'Child'))?>
    </div>
    

    というわけでした。データを取得するのはphpなので何も怖くないけど、JSONファイルの扱いだったり、属性のメソッドだったり…がいまいち。jQueryまだまだだな。。

    ※メソッド名などはわかりやすいように一部かえていますのでもしかしたら誤植があるかも…。
    来週、php勉強会に参加いたしまーっす!2010年、できるかぎり勉強会に行くことを目標にしているのでうれしいっす!しかし、ネット環境がほしい…。と最近切実にこれがほしいぜ…。

    広告
     
    コメントする

    投稿者: : 1月 24, 2010 投稿先 cakephp, javascript

     

    コメントを残す

    以下に詳細を記入するか、アイコンをクリックしてログインしてください。

    WordPress.com ロゴ

    WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

    Twitter 画像

    Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

    Facebook の写真

    Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

    Google+ フォト

    Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

    %s と連携中

     
    %d人のブロガーが「いいね」をつけました。