yii2 dependable select2

The post explain how to implement dependable select2. In order to provide a detail explanation we have chosen first element to be activeform dropdown list for selecting country.

Selection of state will fetch selected country in dropdown list and send ajax request to controller action states in sitecontroller, which will return states for selected country as json output.

Selection of District will similarly look for selected state and request list of distircts as response to ajax request on action districts in sitecontroller.

View file:

use yii\helpers\ArrayHelper;use yii\widgets\ActiveForm;use yii\helpers\Url;

// These are data queries for fetching data from three separate tables.$countries = Countries::find()->all();$states = States::find()->all();$districts = Districts::find()->orderBy('DistrictsName ASC')->all();

<?php$countryList = ArrayHelper::map($countries, 'CountryID', 'CountryName');echo $form->field($address, 'AddressCountryID')->dropDownList($countryList,['prompt'=>'Select Country','class'=>'wide','id'=>'country_id'])->label(false); ?><div class="form-group">    <label for="States">Select States</label>        <?php            $statesList=ArrayHelper::map($states,'StatesID','StatesName');             echo $form->field($address, 'AddressStateID')->widget(DepDrop::classname(), [       'type'=>DepDrop::TYPE_SELECT2,       'data'=>[17 => 'Kerala'],       'options'=>['id'=>'state_id', 'placeholder'=>'Select State ...','class'=>'wide'],        'select2Options'=>['pluginOptions'=>['allowClear'=>true]],        'pluginOptions'=>[        'depends'=>['country_id'],        'url'=>Url::to(['/site/states']),        'loadingText' => 'Loading child level 1 ...',                         ]])->label(false);        ?></div><div class="form-group" >     <label for="Districts">Select District</label>         <?php         echo $form->field($address, 'AddressDistrictID')->widget(DepDrop::classname(), [         'data'=> [4=>'Chittor'],         'options' => ['placeholder' => 'Select District...'],         'type' => DepDrop::TYPE_SELECT2,         'select2Options'=>['pluginOptions'=>['allowClear'=>true]],         'pluginOptions'=>[           'depends'=>['state_id'],           'url' => Url::to(['/site/districts']),           'loadingText' => 'Loading child level 2 ...',                          ],])->label(false);           ?>

Controller Action:

public function actionStates() {        $out = [];        if (isset($_POST['depdrop_parents'])) {        $parents = $_POST['depdrop_parents'];        if ($parents != null) {            $cat_id = $parents[0];            $out=States::find()                        ->where(['StatesCountryID'=>$cat_id])                        ->select(['StatesID as id','StatesName as name'])                        ->orderBy('StatesName ASC')                        ->asArray()->all();       echo Json::encode(['output'=>$out, 'selected'=>'']);       return;                             }              }    }    public function actionDistricts() {         $out = [];         if (isset($_POST['depdrop_parents'])) {         $parents = $_POST['depdrop_parents'];         if ($parents != null) {            $cat_id = $parents[0];            $out=Districts::find()                           ->where(['DistrictsStateID'=>$cat_id])                           ->select(['DistrictsID as id','DistrictsName as name'])                           ->orderBy('DistrictsName ASC')                           ->asArray()->all();          echo Json::encode(['output'=>$out, 'selected'=>'']);        return;                                 }       }    }