dynamic dropdown by #ajax DRUPAL 7 - ajax

Question

I am trying to make dynamic 3 dropdown(DD) by #ajax property of drupal 7..
1st DD contains country list(coming from db)
2nd DD contains states list(coming from db)
3re DD contains city list(coming from db)
problem is as i choose country ..my states DD show states accordingly..by how to trigger my states DD so that my city DD also got updated at the same time my state updated..I have to click on states table only then my cities DD changes..
---MY CODE IN FORM_ALTER IS THIS---
$options_first = iripple_classifieds_country_list();
$selected = isset($form_state['values']['country_by_alter']) ? $form_state['values']['country_by_alter']: key($options_first);
$options_first = iripple_classifieds_country_list();
$form['country_by_alter'] = array(
'#type' => 'select',
'#title' => t('Country'),
'#validated' => TRUE,
'#options' => $options_first,
'#weight' => 5,
//'#disabled' =>TRUE,
'#ajax' => array(
'callback' => 'iripple_classifieds_country_callback',
'wrapper' => 'statereplace',
'effect' => 'fade',
// 'event' => 'onload'
),
'#attributes' => array(
// 'onload' => "jQuery('#edit-country-by-alter').trigger('click')"
)
);
$options_second = iripple_classifieds_state_list();
$selected_state = isset($form_state['values']['state_by_alter']) ? $form_state['values']['state_by_alter']: key($options_second);
$form['state_by_alter'] = array (
'#type' => 'select',
'#title' => t('State'),
'#options' => iripple_classifieds_selected_states($selected),
'#default_value' => isset($form_state['values']['state_by_alter']) ? $form_state['values']['state_by_alter']:'',
'#weight' => 7,
'#validated' => TRUE,
'#prefix' => '<div id="statereplace">',
'#suffix' => '</div>',
'#ajax' => array(
'callback' => 'iripple_classifieds_state_callback',
'wrapper' => 'cityreplace',
'event' => 'change'
)
);
$form['city_by_alter'] = array(
'#type' => 'select',
'#title' => t('City'),
'#options' => iripple_classifieds_selected_cities($selected_state),
'#default_value' => isset($form_state['values']['city_by_alter']) ? $form_state['values']['city_by_alter']:'',
'#weight' => 8,
'#validated' => TRUE,
'#prefix' => '<div id="cityreplace">',
'#suffix' => '</div>',
);

Answer 1

From what I have tried in the past, unless you aren't using the field module, the Hierarchial Select module with either your custom module based off the included hs_smallhierarchy or the hs_taxonomy modules/select menus would work for your three level select element.
The hs_taxonomy module has the database calls you would need, otherwise you can just pass the information and use the former. I've search a lot of different sites and this is something I've tried to accomplish for some time. Looking at their code would show you the Javascript you would have to use and process for the second and third select items because as you stated, unless it isn't stated one page load you will run into problems.
I've gotten a 6 Level Ebay Category to change the options correctly, but it won't update $form_state after a certain level.

Answer 2

function ajax_pra_menu() { $items['ajax_pra'] = array(enter code here
'title' => 'ajax Practice',
'page callback' => 'drupal_get_form',
'page arguments' => array('ajax_pra_dependent_dropdown'),
'access callback' => TRUE,enter code here` );
return $items;
}
function ajax_pra_dependent_dropdown($form, &$form_state) { $options_first = _ajax_pra_get_first_dropdown_options();
$options_two = _ajax_pra_get_second_dropdown_options();
$selected = isset($form_state['values']['dropdown_first']) ? $form_state['values']['dropdown_first'] : key($options_first);
$select_two = isset($form_state['values']['dropdown_second']) ? $form_state['values']['dropdown_second'] : key($options_two);
$form['dropdown_first'] = array(
'#title' => 'Item',
'#type' => 'select',
'#options' => $options_first,
'#default_value' => $selected,
'#ajax' => array(
'callback' => 'ajax_pra_dependent_dropdown_callback',
'wrapper' => 'dropdown-second-replace'
),
);
$form['dropdown_second'] = array(
'#title' => $options_first[$selected] . ' ' . t('type'),
'#type' => 'select',
'#prefix' => '<div id="dropdown-second-replace">',
'#suffix' => '</div>',
'#options' => _ajax_pra_get_second_dropdown_options($selected),
'#default_value' => isset($form_state['values']['dropdown_second']) ? $form_state['values']['dropdown_second'] : '',
'#ajax' => array(
'callback' => 'ajax_pra_two_dependent_dropdown_callback',
'wrapper' => 'dropdown-third-replace',
),
);
$form['dropdown_third'] = array(
'#title' => $options_two[$select_two] . ' ' . t('third'),
'#type' => 'select',
'#prefix' => '<div id="dropdown-third-replace">',
'#suffix' => '</div>',
'#options' => _ajax_pra_get_third_dropdown_options($select_two),
'#default_value' => isset($form_state['values']['dropdown_third']) ? $form_state['values']['dropdown_third'] : '',
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('save'),
);
}
function ajax_pra_dependent_dropdown_callback($form,$form_state)
{
return $form['dropdown_second'];
}
function ajax_pra_two_dependent_dropdown_callback($form,$form_state)
{
return $form['dropdown_third'];
}
function _ajax_pra_get_first_dropdown_options()
{
return drupal_map_assoc(
array(
t('Car'),
t('Bike'),
t('Mobile'),
)
);
}
function _ajax_pra_get_second_dropdown_options($key = ' ')
{
$options = array(
t('Car') => drupal_map_assoc(
array(
t('bmw'),
t('audi'),
)
),
t('Bike') => drupal_map_assoc(
array(
t('honda'),
t('suzuki'),
)
),
t('Mobile') => drupal_map_assoc(
array(
t('nokia'),
t('micro'),
)
),
);
if (isset($options[$key]))
{
return $options[$key];
}
else{
return array();
}
}
function _ajax_pra_get_third_dropdown_options($key = '')
{
$options = array(
t('bmw') => drupal_map_assoc(
array(
t('bmw x3'),
t('bmw x6'),
)
),
t('honda') => drupal_map_assoc(
array(
t('city'),
t('accord'),
)
),
);
if(isset($options[$key]))
{
return $options[$key];
}
else
{
return array();
}
}