Cascading Dropdown Boxes

I am having trouble wrapping my head around how to implement dependent dropdown boxes - any help would be great!

If I was to have say, 3 or 4 dependent dropdown boxes, all of which depend on one-another in a cascaded fashion:

Dropdown1 > Dropdown2 > Dropdown3 > Dropdown4

I have it working so that each dropdown calls a method via ajax and updates the following dropdown as outlined in the appropriate wiki article however I am having issues with figuring out how to implement the following:

Having a default “All” option in Dropdowns 2, 3 and 4 - Is this something where I’d have to manually add a single option prior to populating the contents and have a corresponding check in the controller for a custom value?

Say you’ve selected values in Dropdowns 1, 2, and 3 and the dependent dropdowns are updating as expected, and now you go back and change Dropdown 2, dropdowns 3 and 4 will need to be updated. How do you reset the child dropdowns when changing the parent one?

Hopefully this is easy enough to understand.

Thanks in advance!

you can try this

for e.g

1)dropdown you can call a ajax on dropdwon otherwise call a onchange event on dropdown


<?php

                    echo CHtml::dropDownList('VenueLiquor_liquor_category_id', '', CHtml::listData(LiquorCategory::model()->findAll("status='1' order by category_name"), 'id', 'category_name'), array(

                        // 'value'=>'1',

                        'empty' => 'Select Liquor category',

                        'onchange'=>'liquorcategorylist(this.value)',

//                        'ajax' => array(

//                            'type' => 'GET',

//                            'url' => CController::createUrl('liquor/liquercategory'),

//                            'data' => array('id' => 'js:this.value'),

//                            'update' => '#VenueLiquor_rk_liquor_id1',

//                            'complete' => 'function(data){

////                                $("#VenueLiquor_rk_liquor_id").html(data);

//									}',

//                        )

                        ));

                    ?>

                    <?php echo $form->error($model, 'liquor_category_id'); ?>

                </div>

            </div>

[b]2)Dropdown

[/b]


 <div class="col440 float_l error">

                <div class="row filter_vendor">

                    <?php echo $form->labelEx($model, 'rk_liquor_id'); ?>

                    <div id="VenueLiquor_rk_liquor_id1">

                        <?php echo CHtml::dropDownList('VenueLiquor_rk_liquor_id', '', array("" => "Please Select"), array('onchange' => 'test()', 'class' => 'target_123')); ?>

  //call ajax method and display the 3 and 4 dropdown.

                    </div><?php echo $form->error($model, 'rk_liquor_id'); ?>

                </div>

                

3) you can call the onchange function like


<script>

  function liquorcategorylist(lid)

                    {

                        $.ajax({

                            type: 'GET',

                            url: '<?php echo CController::createUrl('liquor/liquercategory'); ?>',

                            asyc: false,

                            data: {'id': lid},

                            success: function(data) {

                                if (data) {

                                    $('#VenueLiquor_rk_liquor_id1').html(data);

                                }

                            },

                            beforeSend: function() {

                                jQuery('.popup .middle').addClass('loading');

                            },

                            complete: function() {

                                jQuery('.popup .middle').removeClass('loading');

                            }

                        });

                    }

</script>






4) display the recored using liquercategory function on controller


public function liquercategory(){

}

I hope it’s some help.