利用yii framework dropdown 创建级联菜单

利用yii framework dropdown 创建级联菜单 


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

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

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


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

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

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


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

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

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