An Easy Solution for Dependent dropDownList Using AJAX

13 followers

Sometimes new Yii guys face problem to manage dependent dropDownList using AJAX. I am going to discuss an easy solution about this issue.

Example code:

Code in View-

<?php                                   
  echo CHtml::dropDownList('region_id','', 
  array(2=>'New England',1=>'Middle Atlantic',3=>'East North Central'),
 
  array(
    'prompt'=>'Select Region',
    'ajax' => array(
    'type'=>'POST', 
    'url'=>CController::createUrl('loadcities'),
    'update'=>'#city_name', 
  'data'=>array('region_id'=>'js:this.value'),
  ))); 
 
 
 
echo CHtml::dropDownList('city_name','', array(), array('prompt'=>'Select City'));
?>

Code in Controller-

public function actionLoadcities()
{
   $data=RegionCity::model()->findAll('region_id=:region_id', 
   array(':region_id'=>(int) $_POST['region_id']));
 
   $data=CHtml::listData($data,'id','city_name');
 
   echo "<option value=''>Select City</option>";
   foreach($data as $value=>$city_name)
   echo CHtml::tag('option', array('value'=>$value),CHtml::encode($city_name),true);
}

I think this will help to understand actually how AJAX works in Yii for dependent dropDownList also AJAX working behavior in Yii framework.

--Enjoy, Explore... Yii

Total 6 comments

#13335 report it
skworden at 2013/05/22 02:15pm
Not saving values to db

Did you ever figure out what the problem was from Your own comment on the orginal topic / tip.. This is the same exact thing aka repost with no solution.

#13162 report it
freshyiiuser at 2013/05/09 04:31pm
parent dropdownlist from model

hi, this is the independant dropdown list case, is there an article for dropdownlist from model which get the parent and the child values from the parent?

i need a detailed example, i am new in using yii

thank you

#12370 report it
rkrram37 at 2013/03/16 08:31am
getting error undefined index : region_id

i used the same coding as given above, im getting error undefined index : region_id, help needed

#12221 report it
Adil Shahzad at 2013/03/07 08:07am
Dependent drop down

I've three drop down. 1. Provinces (Hard-codded values) 2. Districts (Filling the drop down using Ajax, working perfect) View Part for the Districts:

<div class="row">
        <?php echo $form->labelEx($model,'inst_province'); ?>
            <?php
                echo CHtml::dropDownList('inst_province','', 
                array(1=>'A',2=>'B',3=>'C', 4=>'D'),
                array(
                  'prompt'=>'Select Province',
                  'ajax' => array(
                  'type'=>'POST',
                  'url'=>CController::createUrl('loaddistricts'),
                  'update'=>'#inst_distt', 
                  'data'=>array('inst_province'=>'js:this.value'),
                )));
              ?>
        <span class="help-inline"><?php echo $form->error($model,'inst_province'); ?></span>            
    </div>
  1. Tehsils (Problem here, as AJAX does not work here, may be the District drop down ID is not passing) here is the View part
<div class="row">
<?php echo $form->labelEx($model,'inst_distt'); ?>
<?php echo CHtml::dropDownList('inst_distt','', array(), array('prompt'=>'Select Option'),
                        array(
                        'ajax' => array(
                                    'type'=>'POST', 
                                    'url'=>CController::createUrl('loadtehsils'),
                                    'update'=>'#inst_tehsil', 
                                    'data'=>array('inst_distt'=>'js:this.value'),
                        )));?>
<span class="help-inline"><?php echo $form->error($model,'inst_distt'); ?></span>
 
</div>

Any advice?

#12158 report it
venuk at 2013/03/02 07:28am
thanks

It is working fine for display part, I was able to get the first down values using $model but how to save dependent drop down value to $model?

#11966 report it
kevindng at 2013/02/16 02:23am
thank

nice tutorial

Leave a comment

Please to leave your comment.

Write new article
  • Written by: mrs
  • Category: Tips
  • Votes: +6
  • Viewed: 13,539 times
  • Created on: Dec 9, 2012
  • Last updated: Dec 9, 2012
  • Tags: AJAX, drop down list