たとえば、
都道府県を変えたら、市町村名を変えたいという時や、
大分類を変えたら、それにあわせて小分類を変えるという時、
こんなふうにしますよね。
で、この
はじめのセレクタ(都道府県とか)が切り替わったら、
サーバーアクセスして
あとのセレクタ(市町村名とか)の中身を変える
方法について。
■概要(一般論)
これは
・はじめのセレクタの値が変わったら、ajaxで、あとのデータを取ってくる
ように、画面側を書く
・サーバー側では、上記によって呼び出されたら、DBをアクセスして、
必要な部分だけを書き出す
ということをする。
今回は、これを(後者を)Zendで行う例を示す。
■サンプル
はじめのセレクタで選んだ数に後のセレクタの内容が変わります。
(いや、これじゃあ、2倍する答えが求められるだけで、何の意味もないけど、
サンプルとして)
■画面側(一般的に)
画面側は、セレクタの値が変わったら、onChangeで指定された関数に飛んで、
そこで、AJAXで後の値をとってきて、それを、後のセレクタにセットするように
JQueryで書きます。
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/JavaScript">
<!--
function henkou(){
$.ajax({
scriptCharset:"UTF-8",
dataType:"text",
data:{add1:$("#add1 option:selected").val()},
url:"/ZendAdd5/Index/change",
complete : function(data,sts){
$("#add2").html(data.responseText);
}
});
}
//-->
</SCRIPT>
<TITLE>たしざん</TITLE>
</HEAD>
<BODY>
<form action="/ZendAdd5/Index/kotae" method="post">
<select name="add1" id="add1" onChange="henkou()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
+
<select name="add2" id="add2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
=
<?php echo $this->formSubmit('','Add'); ?>
</form>
</BODY>
</HTML>
|
■サーバー側(Zendを使用した場合)
Zendを使う場合、クライアントからの要求に対して、コントローラーとViewが最低でも必要になります。
○コントローラーについて
画面から呼ばれたコントローラーのActionに対して、値を取得して、それに対応するデータをDBから、本来取ってくるのですが、今回はそれは面どっちいので、DBアクセスしないで、値をそのままadd2にセットしちゃっています。
<?php
require_once 'Zend/Controller/Action.php';
require_once 'My_Test.php';
class IndexController extends Zend_Controller_Action
{
public function indexAction()
{
}
public function changeAction()
{
$add1 = $_GET['add1'];
// 本来は、データベースにアクセスする
// 今回は、DBアクセスを省略
$this->view->assign('add2',$add1);
}
public function kotaeAction()
{
$req = $this->getRequest();
$add1 = $req->getPost('add1');
$add2 = $req->getPost('add2');
$mytest = new My_Test();
$this->view->assign('kotae',$mytest->add($add1,$add2));
$this->_forward('index','ans');
}
}
|
○画面部分
add2をセットしています。
<option value="<?php echo $this->escape($this->add2);?>"><?php echo $this->escape($this->add2);?></option>
|