This yii tutorial will show you how to create a dynamic dropdown list from data in database.
Suppose we need two drop-down list Country and City . Country data gets from Country table.  When we choose a country in drop-down list, city data will load automatically in city table which mapped with country table by country_id .

Now let start by open your yii application and begin the code.


First create the database, you can run the scripts below

DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `city` varchar(255) DEFAULT NULL,
  `country_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of city
-- ----------------------------
INSERT INTO city VALUES ('1', 'Ho Chi Minh city', '1');
INSERT INTO city VALUES ('2', 'Ha Noi', '1');
INSERT INTO city VALUES ('3', 'Da Nang', '1');
INSERT INTO city VALUES ('4', 'New York', '2');
INSERT INTO city VALUES ('5', 'Washington', '2');
INSERT INTO city VALUES ('6', 'California', '2');
INSERT INTO city VALUES ('7', 'Tokyo', '3');
INSERT INTO city VALUES ('8', 'Osaka', '3');
INSERT INTO city VALUES ('9', 'Kyoto', '3');

-- ----------------------------
-- Table structure for `country`
-- ----------------------------
DROP TABLE IF EXISTS `country`;
CREATE TABLE `country` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `country` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of country
-- ----------------------------
INSERT INTO country VALUES ('1', 'Vietnam');
INSERT INTO country VALUES ('2', 'USA');
INSERT INTO country VALUES ('3', 'Japan');

Open your yii view and put the code.

<?php echo $form->dropDownList($model,'country',CHtml::listData(Country::model()->findAll(
  array('order' => 'id')),'id','country'),
  array(
    'prompt'=>'Choose your country',
    'ajax'=>array(
      'type'=>'POST',
      'url' => CController::createUrl('findcity'),
      'data'=> array('country'=>'js:this.value'),
      'update'=>'#city_name',))
  );
?>
  • Country::model()->findAll() Get all city records in database.
  • CHtml::listData() order data by id and format data to drop-down list type.
  • CControllerl::createUrl(‘findcity’) url ajax return will be findcity action.
  • array(‘country’ => ‘js:this.value’) data send to findcity action will be country id value.
  • ‘update’ => ‘#city_name’ result return will be send to select box which has id=”city_name”
<?php echo CHtml::dropDownList('city_name','', array(),
    array('prompt'=>'Choose city')); ?>

The findcity action in controller class

public function actionFindcity()
{
  $data = City::model()->findAll('country_id=:country',
      array(':country'=>$_POST['country']));
  $data=CHtml::listData($data,'id','city');

  echo "<option value=''>City</option>";
  foreach($data as $value=>$name)
    echo CHtml::tag('option', array('value'=>$value),CHtml::encode($name),true);
}

In findcity action, yii finds all city which have country_id match with country id from selectbox an return data. This data will parse to html and send back to view.

Download source code

Wanna make a drop down filter, please go