ウィリアムのいたずらの、まちあるき、たべあるき

ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです(たま~にコンピューター関係も)

Zendで、ひとつのセレクタの内容を元に、もうひとつのセレクタの内容を変えたい場合 その1

2012-11-28 15:29:28 | PHP
たとえば、
  都道府県を変えたら、市町村名を変えたいという時や、
  大分類を変えたら、それにあわせて小分類を変えるという時、

こんなふうにしますよね。


で、この

はじめのセレクタ(都道府県とか)が切り替わったら、
サーバーアクセスして
あとのセレクタ(市町村名とか)の中身を変える

方法について。




■概要(一般論)

これは
・はじめのセレクタの値が変わったら、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>






  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする