Two Dropdownlists Depend On Other One Value

Yii 1.1 General Discussion
1

Hello,

I have the following situation:

In a form i have three CActiveForm dropdownlists. When i select a value in the first, the other two must have their values updated according that selected value.

I can make the correct update to one of the dropdownlist but i don’t know how to do it to the second.

Any help?

Thanks

2

That what you call dynamic dropdown. You will use AJAX in that situation. To make you learn fast I gonna post a piece of example here:

Here the VIEW:




echo $form->dropDownList($model, 'animals',array('0'=>'Dogs',

                                                   '1'=>'Snake',

                                                   '2'=>'Spider'),

                                             array('prompt'=>'Select Filter',

                                                   'ajax' => array(

                                                   'type' => 'POST',

                                                   'url' => CController::createUrl('loadType'),

                                                   'update' => '#AnimalForm_type',

                                                   'data' => array('AnimalForm_animals'=>'js:this.value')

                                                                                 );


echo $form->dropDownList($model, 'type');

You will create a controller, automatically you can get the value of the 1st drop down list, then you can load the options inside the 2nd dropdownlist through the controller.

3

It is my problem too.

May I ask you to detail it more? Exactly on DropDownList’s OnChange event with ajax operations.

4

Hello,

This solves the situation for the update of one dropdownlist, but not for the update simultaneously of two dropdownlist.

Thanks

5

I exactly mean this part of code:




...

array('prompt'=>'Select Filter',

                                                   'ajax' => array(

                                                   'type' => 'POST',

                                                   'url' => CController::createUrl('loadType'),

                                                   'update' => '#AnimalForm_type',

                                                   'data' => array('AnimalForm_animals'=>'js:this.value')

                                                                                 );

...

I am completely geek for jquery ajax.

6

I thought it was only one dropdown will take effect when the first dropdown is changed. Maybe you can try to put an array in update.‘update’ => array("#AnimalForm_type1", “#AnimalForm_type2”). Something like that. If it doesn’t work. I will try to work on that.

Thanks :)

7

Thank you.

8

You’re welcome

9

Hello Shahcheraghi!

Which solution worked for you in second dropdownlist for the update?

Can you put here the complete solution to the Controller and View?

Thanks!

10

I need a dropDownList when its value change, the controller fetch some data to show the user about selected option by JQuery AJAX. So I my code is:


<div class="row">

    	<?php

    	echo $form->dropDownListRow($model, 'opal_id', OpalType::model()->getStoneTypes(), array(

        	'ajax' => array(

            	'type' => 'POST',

            	'url' => $this->createUrl('findOpal'),

            	'data' => array('opal_id' => 'js:this.value', 'YII_CSRF_TOKEN' => Yii::app()->request->getCsrfToken()),

            	//'update'=>'#opal',

            	'success' => 'function(data){

                	var bot = "<button data-dismiss=\"alert\" class=\"close\" type=\"button\">×</button>";

                	$("#opal").html("<div id=\"opal_detail\">"+data+"</div>");

                	$("#opal_detail").prepend(bot);

                	}',

        	),

    	));

    	?>

	</div>

The #opal id an empty div tag.

And in my controller the action is:


public function actionFindOpal() {

    	if(isset($_POST['opal_id'])):

        	echo $this->renderPartial('/opal/view', array('model' => Opal::model()->findByPk($_POST['opal_id'])),true);

    	endif;

	}