Posted on

selectボックスを変更すると他の複数項目を自動的に変更するAjaxのサンプルソース

CakePHP開発にて、selectボックスの変更イベントで他の項目を自動的に変更するAjaxのサンプルのソースです。modelsとcontrollersの一部のコードにつきましては、割愛させて頂きます。本機能を追加するにあたっては、edit.php,samples_controller.php,ajaxskind.php,ajaxsitem.php,ajaxsmemo.phpのコードを参照して頂き、参考になれば幸いです。


views/samples/edit.hph

<?php
echo $form->create(
"Sample",
array(
'controller' => "SamplesController",
'action' => "edit"
)
);
?>

sample

  
カテゴリ <?php echo $form->input('Sample.cate', array('type' => 'select', 'options' => $cateArr, 'empty' => '---')) ?> 種別 <?php echo $form->input('Sample.kind', array('type' => 'select', 'options' => $kindArr, 'empty' => '---')) ?>
項目 <?php echo $form->input('Sample.item', array('type' => 'radio', 'options' => $itemArr)) ?> メモ <?php echo $form->input('Sample.memo', array('type' => 'text', 'size' => 20)) ?>
   <?php echo $form->input('Sample.id', array('type' => 'hidden')); echo $form->input('Sample.updated', array('type' => 'hidden')); ?> <?php echo $form->end(); ?>

controller/samples_controller.php

//--------------------------------------------------------------------------------
// 種別 ajaxソースコード
//--------------------------------------------------------------------------------
function ajaxskind(){
$this->layout = 'ajax';
Configure::write('debug', 0);
// 種別
$kindArr = array(
'1' => '種別1',
'2' => '種別2',
'3' => '種別3',
'4' => '種別4',
'5' => '種別5',
);
$this->set('kindArr', $kindArr);
if (!empty($this->params['form']['cate'])) {
$this->data['Sample']['kind'] = $this->params['form']['cate'];
}
}
//--------------------------------------------------------------------------------
// 項目 ajaxソースコード
//--------------------------------------------------------------------------------
function ajaxsitem(){
$this->layout = 'ajax';
Configure::write('debug', 0);
// 項目
$itemArr = array(
'1' => '項目1',
'2' => '項目2',
'3' => '項目3',
'4' => '項目4',
'5' => '項目5',
);
$this->set('itemArr', $itemArr);
if (!empty($this->params['form']['cate'])) {
$this->data['Sample']['item'] = $this->params['form']['cate'];
}
}
//--------------------------------------------------------------------------------
// メモ ajaxソースコード
//--------------------------------------------------------------------------------
function ajaxsmemo(){
$this->layout = 'ajax';
Configure::write('debug', 0);
if (!empty($this->params['form']['cate'])) {
$this->data['Sample']['memo'] = $this->params['form']['cate'];
}
}

views/samples/ajaxskind.php

<?php
echo $form->input('Sample.kind', array('type' => 'select', 'options' => $kindArr, 'empty' => '---'));
?>

views/samples/ajaxsitem.php

<?php
echo $form->input('Sample.item', array('type' => 'radio', 'options' => $itemArr));
?>

views/samples/ajaxsmemo.php

<?php
echo $form->input('Sample.memo', array('type' => 'text', 'size' => 20));
?>