Problem with Three hierarchical dropdown for country, state city I am new in drupal and I am working on one form where I need to create Country, State and city interdependent,hierarchical ajax dropdowns. So far I could achieve country and state dropdown but while making city dynamic on change of state is not working. It calls same callback and wrapper which I used for country even if I kept them separate. Please check below code

$form['account']['country_id'] = array(
    "#type" =&gt; "select",
    "#title" =&gt; t("Select your country."),
    "#options" =&gt; $countryArray,
    '#ajax' =&gt; array(
        'event'=&gt;'change',
        'callback' =&gt;'my_module_ajax_dropdown_state',
        'wrapper' =&gt; 'state-wrapper',
    ),
    '#id' =&gt; 'country',
    '#required' =&gt; true
);

 if (isset($form_state['values']['state_id'])) {
    // Pre-populate options for city dropdown list if province id is set
    $cityOptions = _load_city($form_state['values']['state_id']);
 }

// Options for city dropdown list
$stateOptions = array('- Select state -');
if (isset($form_state['values']['country_id'])) {
    // Pre-populate options for city dropdown list if province id is set
    $stateOptions = _load_state($form_state['values']['country_id']);
}

$form['account']['state_id'] = array(
    "#type" =&gt; "select",
    "#title" =&gt; t("Select your county/State."),
    '#prefix' =&gt; '&lt;div id="state-wrapper"&gt;',
    '#suffix' =&gt; '&lt;/div&gt;',
    "#options" =&gt; $stateOptions,
    "#ajax" =&gt; array(
        'event'=&gt;'change',
        'callback' =&gt;'my_module_ajax_dropdown_city',
        'wrapper' =&gt; 'city-wrapper',
    ),
    '#default_value' =&gt; '--Select State--',
    '#id' =&gt; 'state',
    '#required' =&gt; true
);


$form['account']['city'] = array(
    "#type" =&gt; "textfield",
    "#title" =&gt; t("Enter your city."),
    '#id' =&gt; 'city',
    '#prefix' =&gt; '&lt;div id="city-wrapper"&gt;',
    '#suffix' =&gt; '&lt;/div&gt;',
    '#required' =&gt; true,
    '#default_value' =&gt; $account-&gt;city
); 


These are my callback functions which are returning form element

function my_module_ajax_dropdown_state($form, $form_state){
  return $form['account']['state_id'];
}

function my_module_ajax_dropdown_city($form, $form_state){
 return $form['account']['city_id'];
}


I am trying to figure it out but no success yet. Please help me.

Thanks
I was facing the similar issue in my drupal site.
The other issue was the performance especially for IE where it took too much time in rendering the new item.

After some experiments, I made the following module that can help in making three hierarchical dropdown for country state and city. Its developed in a generic way that it can be used for n number of dependent dropdowns and can be used for other dependent data as well.

https://www.drupal.org/project/ajax_chain_select