[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