Dynamic select list in the form API (dependent dropdown list)?

Question

First I want to select State (like Tamil Nadu, Sikkim, Kerala) after selecting state, depended city list will be display another dropdown list ( for example Tamil Nadu -> Chennai, Salem, Karur and Kerala -> Trivandrum, Kochin etc)

Please help me please how to make it, here i have tried some coding but does not work, Please help me

Sstate - Table

$query_state = db_select('state', 's');
$query_state->fields('s',array('State_code','State_name'));
$query_state->orderBy('State_name','ASC');
$state_results = $query_state->execute();
$options_state = array();

foreach($state_results as $state_record) {
  $options_state[$state_record->State_code]=t($state_record->State_name);
}

$form['state'] = array(
  '#type' => 'select',
  '#title' => t('State'),
  '#options' => $options_state,
  '#required' => TRUE,
);

City - Table

$query_city=db_select('city', 'c');
$query_city->fields('c',array('District_Code','District_Name'));
$query_city->condition('State_Code','$state_record->State_code','=');
$query_city->orderBy('District_Name','ASC');
$city_results = $query_city->execute();
$options_city = array();

foreach($city_results as $city_record) {
  $options_city[$city_record->District_code]  =t($city_record->District_Name);
}

$form['city'] = array(
  '#type' => 'select',
  '#title' => t('District'),
  '#options' => $options_city,
  '#required' => TRUE,
  '#states' => array(
    'visible' => array(
      ':input[name="state"]' => array('value' => $options_state)
    )
  )
);

Answer 1

Basically, in your form declaration, you have to add

In your form['state'] :

'#ajax' => array(
  'callback' => '_ajaxfunction',
  'wrapper' => 'divaroundseconddropdown'
);

Then in your form['town'] :

'#prefix' => '<div id="divaroundseconddropdown">',
'#suffix' => '</div>',

Now in your _ajaxfunction :

function _ajaxfunction($form, $form_state) {
  return $form['city'];
}

Now, back to your form['town'], you simply have to build your $options with the $form_state['values']['state'] variable, which will contain what has been filled in the first dropdown.

Everything is documented here.

[EDIT]

First replace $state_record in your $query_city by $form_state['values']['state']; *You can check if the value is formatted the right by dpm($form_state); in your _ajaxfunction.

Then :

$form['state']= array(
  '#type' => 'select',
  '#title' => t('State'),
  '#options' =>$options_state,
  '#required' => TRUE,
  '#ajax' => array(
    'callback' => '_ajaxfunction',
    'wrapper' => 'divaroundseconddropdown'
  ),
);


$form['city']= array(
  '#type' => 'select',
  '#title' => t('District'),
  '#options' => $options_city,
  '#prefix' => '<div id="divaroundseconddropdown">',
  '#suffix' => '</div>',
  '#required' => TRUE,
  '#states'=>array(
    'visible'=>array(
      ':input[name="state"]' => array(
        'value'=>$options_state))));

Close your function, open a new one :

function _ajaxfunction($form, $form_state) { return $form['city']; }

Answer 2

You can try the following,

$form['state'] = array(
    '#type' => "select",
    '#options' => $category,
    '#name' => "category",
    '#attributes' => array(
        'onchange' => 'getCategory(this);',
     ),
    '#id'   => "state",
    '#default_value'=> $cat_default,
    '#prefix' => '',
);
$form['city'] = array(
    '#type' => "select",
    '#options' => $skillset,
    '#name' => "skillset",
    '#id'   => "city",
    '#default_value'=> $skil_default,
    '#prefix' => '',
);

Using the onclick getCategory(this) function you can fetch the city corresponding to the state using AJAX and add to the second field i.e. city using javascipt

document.getElementById("city").innerHTML = result;