How to implement Dependent drop down zend framework 1.12 form using ajax and JQuery

Question

I have seen some answers relating to my question but these didn't help me getting my result. I am using zend framework 1.12 and I have to implement dependent drop downs form elements coming from two different tables.

My form Elements:

   $country  = new Zend_Form_Element_Select('Country');
   $country ->      setLabel('Country');        

  $city     =   new  Zend_Form_Element_Select('city');
  $city     ->      setLabel('City:');

  $this->addElements(array($country,$city));

Country Table is parent Table of City Table and Using Zend_Dbtable and jQuery.

Would anyone please show me how to do this by using jQuery and AJAX. I mean from Controller to View.

Answer 1

When loading the form from controller you can set the countries drop-down value from Controller like:

 $form->get('countries')->setAttributes(array(
    'options' => $country_list,
 ));

And in ajax based on the select change(Country), make a ajax call to load cities:

 $("select[name='countries']").change(function(){
    var sel_country = this.value;
    $.ajax({
        type: 'POST',
        url: '{mention your url to get the cities for chosen country}',
        data: { country: sel_country },
        success:function(data){
            // Assign the cities to select drop-down.
            $("select[name='cities']").html(data);                  
        }
    });
});

Else:

you know the selected country during the form load, get the cities for selected country and assign like,

  $form->get('cities')->setAttributes(array(
    'options' => $city_list,
 ));

Else:

Assign to Countries List and Select cities list to view variables and use the view variable in view file and use the foreach statement to assign the option values to drop down for both Country and City(Select drop-down).

I hope this helps.