[cakephp]連携しているプルダウンの表示を変更する(jQuery使用)

(cakephp2.2.5)
台帳とかで会社名を選んだ時に、その会社に属している担当者だけを表示するプルダウン。
台帳、会社、担当のアソシエーションは出来ているものとして進めます。

A社を選んだ時は、A社の担当者だけをプルダウンに表示。B社のときはB社担当者だけをプルダウンに表示します。
今回はjQueryを使用します。

add.ctp
<?php echo $this->Html->script('jquery'); ?>

<h1>Add</h1>
<?php
// 担当者切り替えのJS
$this->Js->get('#DaichoCompId')->event(
    'change',
    $this->Js->request(
        array('controller'=>'daichos','action'=>'ajax_tantos'),
        array('update' => '#DaichoTantoId', 'dataExpression' => true, 'data' => '$("#DaichoCompId").serialize()')
    )
);
echo $this->Js->writeBuffer();
?>

<?php
echo $this->Form->create('Daicho');
echo $this->Form->input('comp_id', array('label'=>'会社名', 'empty'=>'選んでください'));
echo $this->Form->input('tanto_id', array('label'=>'担当者', 'empty'=>'選んでください'));
echo $this->Form->end('Submit');
?>
DaichosController.php(抜粋)
(略)
public $helpers = array('Js'=> array('Jquery'));
public $components = array('RequestHandler');

public function add() {
    (略)
    // 会社
    $comps = $this->Daicho->Comp->find('list');
    // 担当(姓・名を結合して名前にする)
    $this->Daicho->Tanto->virtualFields = array('name' => "CONCAT(Tanto.sei, ' ', Tanto.mei)");
    $condition = array(
        'fields' => array(
                    'Tanto.id',
                    'Tanto.name'
        ),
    );
    $tantos = $this->Daicho->Tanto->find('list', $condition);
    (略)
}

// 担当者の表示を切り替える
public function ajax_tantos() {
    $this->Daicho->Tanto->virtualFields = array('name' => "CONCAT(Tanto.sei, ' ', Tanto.mei)");
    $this->set('options',
        $this->Daicho->Tanto->find('list',
            array(
                'conditions' => array(
                    'Tanto.comp_id' => $this->params['url']['data']['Daicho']['comp_id']
                ),
                'fields' => array(
                    'Tanto.id',
                    'Tanto.name'
                )
            )
        )
    );
}
(略)
ajax_tantos.ctp
<?php foreach($options as $key => $val) : ?>
<option value="<?php echo $key; ?>"><?php echo $val; ?></option>
<?php endforeach; ?>

Addすると、以下の様なJSが挿入されて、会社名プルダウンを選ぶと、担当者の表示が変わる。

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {$("#DaichoCompId").bind("change", function (event) {$.ajax({data:$("#DaichoCompId").serialize(), dataType:"html", success:function (data, textStatus) {$("#DaichoTantoId").html(data);}, url:"\/daichos\/ajax_tantos"});
return false;});});
//]]>
</script>

参考:http://blog.jandorsman.com/2011/01/using-ajax-and-cakephp-to-dynamically-populate-select-form-fields/
参考:http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html

「[cakephp]連携しているプルダウンの表示を変更する(jQuery使用)」への7件のフィードバック

  1. ちょうど見たような作業を作成しているところでこのサイトにたどり着きました。
    早速、実装させて頂いたのですが、IEだとセレクトボックスの場所にHTML全てを表示させようとしてうまくいかないです。chromeとfirefoxでは問題なくできたのですが・・・
    SUZUKIさんの方ではIEでも問題なく動いているのでしょうか?

  2. すみません、自己解決いたしました。
    IEではGET送信にするとキャッシュが発生するようで、
    コントローラーの

    ’action’=>’ajax_tantos’

    ’action’=>’ajax_tantos?’

    で解決しました。

  3. そうなんですか?
    今、IE9で見ましたが、FF、クロームと同じく会社を選ぶと担当者が変わります。

  4. 今日「?」を消したら、普通に動きました。
    こちらの仕様なのかもしれません。
    こちらで起きた現象はセレクトタグの中にHTMLタグすべて入ってしまう現象だったんです。
    で、昨日は「?」を付けたらその現象はなくなりました。
    でも、実装できたので助かりました。
    また、ちょくちょくサイト訪問させて頂きます。
    ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)