Yii 2.0: 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 cant implementation in Yii2 because Yii2 not built-in AJAX functionality hem.. I am search about it and get this statement

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 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(

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-',
                $.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')

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)
        $countPosts = \common\models\Post::find()
                ->where(['category_id' => $id])
        $posts = \common\models\Post::find()
                ->where(['category_id' => $id])
                ->orderBy('id DESC')
            foreach($posts as $post){
                echo "<option value='".$post->id."'>".$post->title."</option>";
            echo "<option>-</option>";

Any question? or any other idea??


membuat dependent dropdown tanpa extension tambahan

Total 3 comments

#19645 report it
oligalma at 2015/10/30 10:46pm
Good tutorial, but the $.post part didn't work to me. Here my adjustments
$.post("'.Yii::$app->urlManager->createUrl('posts/lists') . '",             {id:$(this).val()}, 
                function( data ) {
                    $( "select#title" ).html( data );
#19634 report it
gia-web.com at 2015/10/21 05:16am

For a yii2 beginner can you explain in 2 words what is it with \common\models\Post ? is it in yii2 core? or is a "extra layer" between Active record and the models? I just use it I have a Fatal error: Class 'common\models\Post' not found

#17849 report it
Railton Nepomuceno at 2014/07/30 12:52am
My adjusts


        use yii\helpers\ArrayHelper;
        use app\models\Estado;
        use yii\helpers\Html;
        use yii\helpers\Url;
        $estado = ArrayHelper::map(Estado::find()->all(), 'esta_codigo', 'esta_nome');
        echo $form->field($model, 'esta_codigo')->dropDownList(
                    'prompt'=>'Selecione um estado',
                        $.get( "'.Url::toRoute('/aluno/municipio').'", { id: $(this).val() } )
                            .done(function( data ) {
                                $( "#'.Html::getInputId($model, 'muni_codigo').'" ).html( data );
     echo $form->field($model, 'muni_codigo')->dropDownList(['prompt'=>'Selecione um estado']) 


public function actionMunicipio($id){
        $rows = \app\models\Municipio::find()->where(['esta_codigo' => $id])->all();
        echo "<option>Selecione um municipio</option>";
            foreach($rows as $row){
                echo "<option value='$row->muni_codigo'>$row->muni_nome</option>";
            echo "<option>Nenhum municipio cadastrado</option>";

Leave a comment

Please to leave your comment.

Write new article