利用yiiframeworkdropdown创建级联菜单

利用yii framework dropdown 创建级联菜单


你经常需要一个表单，级联城市，或者级联的分类等等功能，其中有两个下拉框，一个的值依赖于另外一个下拉框。使用Yii 内置的 ajax 功能，你可以创建这样一个下拉框。下面将演示如何实现它。

首先是表单的视图。我们将展示一个表单，显示国家，以及根据国家将显示它的城市。
程序代码 程序代码
echo CHtml::dropDownList(&＃39;country_id&＃39;,&＃39;&＃39;, array(1=>&＃39;USA&＃39;,2=>&＃39;France&＃39;,3=>&＃39;Japan&＃39;),
array(
&＃39;ajax&＃39; => array(
&＃39;type&＃39;=>&＃39;POST&＃39;, //request type
&＃39;url&＃39;=>&＃39;dynamiccities&＃39;, //url to call
&＃39;update&＃39;=>&＃39;#city_id&＃39;, //selector to update
//&＃39;data&＃39;=>&＃39;js:Javascript statement&＃39;
//leave out the data key to pass all form values through
)));

//empty since it will be filled by the other dropdown
echo CHtml::dropDownList(&＃39;city_id&＃39;,&＃39;&＃39;, array());
?>


第一个下拉框由 几个代表国家的 value/name 对组成。。当它被改变时，一个 ajax 请求将被当前 controller 的 &＃39;dynamiccities&＃39; action完成。请求的结果( &＃39;dynamiccities&＃39; action的输出) 将被替换到第二个id 是#city_id的下拉框。

接下来是 controller action，它将输出 html 以填充第二个下拉框。此外它将依赖于第一个下拉框的值。
程序代码 程序代码
public function actionDynamiccities()
{
$data=Location::model()->findAll(&＃39;parent_id=:parent_id&＃39;,
array(&＃39;:parent_id&＃39;=>(int) $_POST[&＃39;country_id&＃39;]));

$data=CHtml::listData($data,&＃39;id&＃39;,&＃39;name&＃39;);
foreach($data as $value=>$name)
{
echo CHtml::tag(&＃39;option&＃39;,
array(&＃39;value&＃39;=>$value),CHtml::encode($name),true);
}
}
?>


它将检索所有 parent_id 是第一个下拉框值的城市。然后将输出所有这些城市到标签中，最终形成第二个下拉框。

你可能想知道 $_POST[&＃39;country_id&＃39;] 来自哪里。非常简单，当第一个下拉框中的 ajax 数组的 &＃39;data&＃39; 键为空时，下拉框所在表单所有元素的值将被传递到 controller ，通过 ajax 请求。若你在使用 Firebug 你可以查看这个请求。

这个 behaviour 也可以被改变。默认地，ajax 配置数组 中 &＃39;data&＃39; 键的值是 js:jQuery(this).parents("form").serialize()。 开头的 js: 告诉 Yii 后面跟的是一个 Javascript 语句，不应被转义。因此，若你改变 &＃39;data&＃39; 键为另外以 &＃39;js:&＃39; 开始的语句，你可以填写自己的语句。也适用于 &＃39;success&＃39; 参数。