Creating a Dependent Dropdown From Scratch in Yii2

I have read http://www.yiiframework.com/wiki/24/creating-a-dependent-dropdown/ (Dependen Dropdown Yii1), but I can't implement it in Yii2 because Yii2 does not have built-in AJAX functionality hem.. I searched about it and came across this post

qiangxue commented on Aug 28, 2013 In 2.0 we removed most in-page js code. You should write explicit js code in external js files to achieve similar result as in 1.1. The code is very trivial though.

So we must create our own code hehe oh no we can use great extension http://demos.krajee.com/widget-details/depdrop, this right but some one dislike use third party too much.. Oke I try to explain You about this classic case :)

Create Dropdown

First, You should know how to make dropdown in Yii2, I use activefield

echo $form->field($model, 'name_field')->dropDownList(
		[items],
		[options]
	);
The Table

In this case, I have 2 table table category

  • id int primary key auto increment
  • name varchar(255)

table category

  • id int primary key auto increment
  • title varchar(255)
  • content text
  • category_id int
The View
use yii\helpers\ArrayHelper;
$dataCategory=ArrayHelper::map(\common\models\Category::find()->asArray()->all(), 'id', 'name');
	echo $form->field($model, 'category_id')->dropDownList($dataCategory, 
	         ['prompt'=>'-Choose a Category-',
			  'onchange'=>'
				$.post( "'.Yii::$app->urlManager->createUrl('post/lists?id=').'"+$(this).val(), function( data ) {
				  $( "select#title" ).html( data );
				});
			']); 
	
	$dataPost=ArrayHelper::map(\common\models\Post::find()->asArray()->all(), 'id', 'title');
	echo $form->field($model, 'title')
        ->dropDownList(
            $dataPost,           
            ['id'=>'title']
        );

Yii2 have change chtml list be ArrayHelper::map.. so You should use library Array helper

use yii\helpers\ArrayHelper;

The Controller
public function actionLists($id)
    {				
        $posts = \common\models\Post::find()
				->where(['category_id' => $id])
				->orderBy('id DESC')
				->all();
				
		if (!empty($posts)) {
			foreach($posts as $post) {
				echo "<option value='".$post->id."'>".$post->title."</option>";
			}
		} else {
			echo "<option>-</option>";
		}
		
    }
Any question? or any other idea??
Reference

membuat dependent dropdown tanpa extension tambahan

2 1
10 followers
Viewed: 81 547 times
Version: 2.0
Category: How-tos
Written by: ThePr0f3550r
Last updated by: alrazi
Created on: Jul 2, 2014
Last updated: 4 months ago
Update Article

Revisions

View all history

Related Articles