Cómo crear 2 selects dependientes sin active record

Cómo crear 2 selects dependientes sin active record

En este tutorial vamos a ver cómo crear 2 selects dependientes utilizando los widgets de kartik sin active record.

En este ejemplo tenemos 2 entidades de ejemplo, la primera entidad es "Proveedores" y la segunda "Unidad Operativa" que podría decirse que es como una sucursal que forma parte de un proveedor. 

Para éste ejemplo vamos a necesitar que tenga instalados los siguientes widgets de kartik.

// Widgets de kartik
use kartik\select2\Select2;
use kartik\depdrop\DepDrop;

// Y tambien estos
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\Url;

El siguiente paso es tener un controller con su vista correspondiente.

Ejemplo de controller cree un controller nuevo o alguno que ya tenga, por ejemplo este: "/controllers/ejemploController.php"

//Obtiene un arreglo con la estructura adecuada para el primer select
$proveedores = UnidadOperativa::find()->select([ 'id','nombre as name'])
                  ->where([ 'proveedor_id' => $proveedor_id ])->asArray()->all();

        return $this->render('_extemporaneos', [
                    'proveedores' => $proveedores, 
        ]);

Dentro de la vista llamada '_extemporaneos' puede tener un código como el siguiente:

 <?php 
    $form = ActiveForm::begin([
         'options' => [      
                            'method' => 'POST' ]
                            ]);

                        echo Select2::widget([
                        'name' => 'proveedor',
                        'data' => $proveedores,
                        'options' => [
                            'id' => 'proveedor-empresa',
                            'placeholder' => 'Seleccione un proveedor',
                        ],
                    ]);
                    
                    echo "<br>";
                    echo DepDrop::widget([
                       'name' => 'unidad_operativa',
                       'options' => ['id' => 'unidad-proveedor'],
                       'pluginOptions' => [
                          'depends'  => ['proveedor-empresa'],
                          'placeholder' => 'select ...',
                          'url' => Url::to(['/documentacion/json-unidades-operativas'])
                       ]
                   ]); 

?>

<?php ActiveForm::end(); ?>

El repositorio es opcional, se puede sustituir si coloca directamente la consulta active record en su action, pero lo pongo por si desea utilizar una estructura de Repositorios.

<?php

namespace app\repositories;

use app\models\Proveedor;
use app\models\UnidadOperativa;
use yii\helpers\ArrayHelper;

class ProveedorRepo {
    
    public static function getforDropUnidadOperativa($proveedor_id) {
          $unidades = UnidadOperativa::find()->select([ 'id','nombre as name'])
                  ->where([ 'proveedor_id' => $proveedor_id ])->asArray()->all();
          return $unidades;
    }

}

Y dentro del mismo controller vamos a agregar un action donde explico algunas líneas:

    public function actionJsonUnidadesOperativas(){

       //Convertira todas las salidas a formato JSON
        Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
        
        $out = [];

        // Si se reciben datos posts con la variable 'depdrop_parents'
        if(isset($_POST['depdrop_parents'])){

            $parents = $_POST['depdrop_parents'];

             if ($parents != null) {
                 $cat_id = $parents[0]; 

                 // Este Repositorio (ProveedorRepo::getforDropUnidadOperativa devuelve un arreglo con lo que necesitamos                                                 
                 $out = ProveedorRepo::getforDropUnidadOperativa($cat_id);
                 return [ 'output' => $out , 'selected'=>''];
             }
        }        
         return ['output'=>'', 'selected'=>''];
    }

Es importante que verifique el formato de salida del JSON, debe lucir de la siguiente manera, estoy lo puede comprobrar en la consola de JavaScript de su navegador. 

{"output":[{"id":"1","name":"Sucursa Cuernavaca"},{"id":"2","name":"Sucursal Cuautla"}],"selected":""}

Fuentes: 
https://demos.krajee.com/widget-details/select2