Two or more dropdown lists depending of only one dropdown

Hello everyone!,

I’m working with Yii2 basic template on a project and for a few days I’ve been stuck on something that I’ve not find examples or similar cases.

What I’m trying to do is in a form have two dropdown lists to load values depending of one single dropdown list.

Let me explain, I have 3 dropdown lists in my form by now

  1. Proveedor (wich is the manufacturer of X product)

  2. Contacto (the person of contact in the manufacturer company)

  3. Cuenta Proveedor (the bank account of the manufacturer company)

What I want to do is when the user selects a "Proveedor" on dropdown 1, the dropdown lists 2 and 3 load the data related to that specific "Proveedor" at the same time. So far the dependency worked with lists 1 and 2 (Obviously I have the "Proveedor" FK in the tables that generate lists 1 and 2), but when I added the 3rd list at the moment of selecting something on list 1 it just loaded the respective dependant data on list 3, and list 2 remained empty. So I think I may be overwriting the same variable or something like that.

In case you need, this is what I have now:

The _form.php, I have included the necessary models in the "use" section.




//Dropdown list n° 1

    <?= $form->field($model, 'proveedor')->dropDownList(

        ArrayHelper::map(Proveedores::find()->orderBy('razon_social')->all(),'id_proveedor','razon_social'),

        [

            'prompt'=>'Seleccione Proveedor',


// I have two onchange events, wich I believe to cause the problem

            'onchange'=>'

                $.post( "index.php?r=contactos/lists&id='.'"+$(this).val(), function( data ){

                    $("select#ordendecompra-contacto").html( data );

                });'

                    ,

            'onchange'=>'

                $.post( "index.php?r=cuenta-proveedores/lists&id='.'"+$(this).val(), function( data ){

                    $("select#ordendecompra-cuenta_proveedor").html( data );

                });'

    ]) ?>


//Dropdown n° 2, depends of n° 1

    <?= $form->field($model, 'contacto')->dropDownList(

        ArrayHelper::map(Contactos::find()->all(),'id_contacto','nombre'),

        ['prompt'=>'Seleccione Contacto']

    ) ?>


//Dropdown n° 3, depends of n° 1 also

    <?= $form->field($model, 'cuenta_proveedor')->dropDownList(

        ArrayHelper::map(CuentaProveedores::find()->all(),'id_cuenta_proveedor','numero'),

        ['prompt'=>'Seleccione Cuenta del Proveedor']

    ) ?>



This is what I have in the "ContactosController.php", the controller for the contact persons of the manufacturer:




    public function actionLists($id)

    {

        $countContactos = Contactos::find()

            ->where(['proveedor' => $id])

            ->count();


        $contactos = Contactos::find()//->orderBy('nombre')

            ->where(['proveedor' => $id])

            ->all();


        if($countContactos > 0)

        {

            foreach ($contactos as $contact) {

                echo "<option value='".$contact->id_contacto."'>".$contact->nombre."</option>"; 

            }

        }

        else{

            echo "<option>Por favor agregue un contacto</option>";

        }

    }



And the same logic applied in the "CuentaProveedorController.php", wich is the controller for the manufacturers bank account:




    public function actionLists($id)

    {

        $countCuentaProveedor = CuentaProveedores::find()

            ->where(['proveedor' => $id])

            ->count();


        $cuentas = CuentaProveedores::find()//->orderBy('nombre')

            ->where(['proveedor' => $id])

            ->all();


        if($countCuentaProveedor > 0)

        {

            foreach ($cuentas as $cuenta) {

                echo "<option value='".$cuenta->id_cuenta_proveedor."'>".$cuenta->numero."</option>"; 

            }

        }

        else{

            echo "<option>Por favor agregue una cuenta</option>";

        }

    }



Thanks in advance for any help

Hi!

This is a common task.

My suggest is to use a prebuild solution.

DepDrop from kartik-v does exactly what you want to achieve.

Link:

Demo / Usage:

http://demos.krajee.com/widget-details/depdrop

Regards

Thank you MetaCrawler!, I’ll try the widget, looking at the examples seems that I need to set the dependency to one dropdown instead of nested as the cases shown there.

Regards.