dynamically populate a select field based on the selection in another field works only the first time I am trying to dynamically populate a select field (chamiponship) based on the selection in another field (country).
It works fine when I load the page but just the first time, the second time I select another country it does not work.
Did anyone have this issue and how did you solve?
Here is my code

&lt;?php

function testform_menu(){

    $items['data'] = array(
        'title' =&gt; 'data access',
        'description' =&gt; 'get acess to the data',
        'page callback' =&gt; 'drupal_get_form',
        'page arguments' =&gt; array('testform_form'),
        'access callback' =&gt; TRUE,
    );
    return $items;
}


function testform_form($form, &amp;$form_state) {

        $form['country']=array( 
            '#type'=&gt;'select',
            '#title'=&gt;t('Select your country'),
            '#options'=&gt;array('FR' =&gt;'France', 'UK' =&gt;'England','DE' =&gt;'Germany'),
            '#ajax' =&gt; array('event'=&gt;'change','callback' =&gt;'LoadDiv','wrapper' =&gt; 'DivSelect',),
        );

        $optionsDiv = array('Ligue 1','Ligue 2');
        if (isset($form_state['values']['country'])) {
            $optionsDiv = loadDivision($form_state['values']['country']);
        }

        $form['champion']=array( 
            '#type'=&gt;'select',
            '#title'=&gt;t('Select your championship'),
            '#options'=&gt;$optionsDiv,
            '#prefix' =&gt; '&lt;div id="DivSelect"&gt;',
            '#suffix' =&gt; '&lt;/div&gt;',
        );


        $form['submit'] = array(
            '#type' =&gt; 'submit',
            // #value is the text to display inside the button
            '#value' =&gt; t('Submit'),
        );

        return $form;
}

function LoadDiv($form, &amp;$form_state) {
  return $form['champion'];
}

function loadDivision($country_id) {
  $data_count=array('FR' =&gt; array('Ligue1', 'Ligue2'), 'UK' =&gt; array('Premier','Championship'), 'DE' =&gt; array('Bundesliga1','Bundesliga2'));
  $championship = $data_count[$country_id];
  return $championship;
}
It is hard to say without seeing your JavaScript, but what you describe fits perfectly with the following scenario:

When your page loads initially loads, the LoadDiv JavaScript event is bound to #DivSelect, but when that #DivSelect element is overwritten by the Drupal AJAX api, the event is no longer bound.

The solution is to use Drupal.behaviors - there is a good, short explanation at http://www.amazeelabs.com/en/blog/drupal-behaviors-quick-how.

Wrap your LoadDiv javascript in the drupal behaviors code, and it will be added for every request, including AJAX requests:

Drupal.behaviors.myModuleDoSomethingCool = {
  attach: function (context, settings) {
    $('#DivSelect').change(function() { 
      // Loaddiv etc etc
    });
  }
};


I agree with comments suggesting that this is a good use case for hierarchical select - but the above is the likely explanation for why your AJAX works the first time and not the second time.