Creating a dependent dropdown

Tutorials

AJAX, drop down list

Often you'll need a form with two dropdowns, and one dropdown's values will be dependent on the value of the other dropdown. Using Yii's built-in ajaxAJAX functionality you can create such a dropdown. Below will be demonstrated how you can achieve this.
 
 
First the view with the form. 
 
 
The view with the form.
 
-----------------------
 
We'll show a form that shows countries and dependent of the country selected will show cities.

```php'ajax' => array(
'type'=>'POST', //request type
'url'=>'CController::createUrl('currentController/dynamiccities'), //url to call.
 
//Style: CController::createUrl('currentController/methodToCall') 'update'=>'#city_id', //selector to update //'data'=>'js:javascript statement'
 
//leave out the data key to pass all form values through ))); echo CHtml::dropDownList('city_id','', array()); //empty since it will be filled by the other dropdown echo CHtml::dropDownList('city_id','', array()); 
 
``` The first dropdown is filled with several value/name pairs of countries. Whenever it is changed an ajax request will be done to the 'dynamiccities' action of the current controller. The result of that request (output of the 'dynamiccities' action) will be placed in the second dropdown with id is #city_id. Next is tThe controller action, i
 
---------------------
 
It will have to output the html to fill the second dropdownlist. Furthermore it will do that dependent on the the value of the first dropdown.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);
}
}You might wonder where the $_POST\['country_id'\] comes from. It's simple, when the 'data' key of the ajax array in the first dropdown is empty, all values of the elements of the form the dropdown is in, will be passed to the controller via the ajax request. If you're using Firebug you can inspect this request and see for yourself.

This behaviour can also be changed. By default the value of the 'data' key in the ajax configuration array is `js:jQuery(this).parents("form").serialize()`. The preceding `js:` indicates to Yii that a javascript statement will follow and thus should not be escaped. So, if you change the 'data' key to something else preceded by 'js:' you can fill in your own statement. The same applies to the 'success' parameter.
 
 
For this to work you also need to edit the Method accessRules() (if available) in your current Controller. In this example we would change 
 
 
```php 
array('allow', // allow authenticated user to perform 'create' and 'update' actions
 
'actions'=>array('create','update'),
 
'users'=>array('@'),
 
),
 
```
 
to
 
 
```php 
array('allow', // allow authenticated user to perform 'create' and 'update' actions
 
'actions'=>array('create','update','dynamiccities'),
 
'users'=>array('@'),
 
),
 
```
 
in order to allow access for authenticated Users to our Method 'dynamiccities'. To allow access to eg any User or to use more complex rules please read more about accessRules and Authentication [here](http://www.yiiframework.com/doc/guide/topics.auth).
 
 
**Note:** For testing purposes you could also comment out
 
 
```php 
'accessControl', // perform access control for CRUD operations
 
```
 
in the filters() Method. This will disable all access controls for the controller. You should always re-enable it after testing.
 
 
Related Links
 
-------------
 
[Persian version](http://shgn.ir/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%84%DB%8C%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%D9%88%D8%A7%D8%A8%D8%B3%D8%AA%D9%87-%D8%A8%D9%87-%D9%87%D9%85-%D8%AF%D8%B1-yii/ "Persian Version")