AJAX-based dropdown example form.

AJAX-based dropdown example form.

A form with a dropdown whose options are dependent on a choice made in a previous dropdown.

On changing the first dropdown, the options in the second are updated.


ohdavey’s picture

I applied this technique to a ctools plugin custom content type, I have a form rendering a select field for a list of available views. After a view is selected I want to get a list of displays.

function example_edit_form($form, &$form_state) {
  $conf = $form_state['conf'];
  $view_options = _example_views_list();
  $form['view'] = array(
    '#type' => 'select',
    '#title' => t('Select View'),
    '#required' => TRUE,
    '#options' => $view_options,
    '#ajax' => array(
      'callback' => 'ajax_view_display_dropdown_callback',
      'wrapper' => 'view-display-dropdown',
  $form['view_display'] = array(
    '#type' => 'select',
    '#title' => 'Display',
    '#prefix' => '<div id="view-display-dropdown">',
    '#suffix' => '</div>',
    '#options' => _example_views_display_option($selected),
    '#default_value' => isset($form_state['values']['view_display']) ? $form_state['values']['view_display'] : '',

  return $form;

// Ajax Call
function ajax_view_display_dropdown_callback($form, $form_state) {
  return $form['view_display'];