7.x-1.x ajax_example.module ajax_example_dependent_dropdown($form, &$form_state)

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.

Related topics

1 string reference to 'ajax_example_dependent_dropdown'
ajax_example_menu in ajax_example/ajax_example.module
Implements hook_menu().

File

ajax_example/ajax_example.module, line 558
AJAX Examples module file with basic examples.

Code

function ajax_example_dependent_dropdown($form, &$form_state) {
  // Get the list of options to populate the first dropdown.
  $options_first = _ajax_example_get_first_dropdown_options();
  // If we have a value for the first dropdown from $form_state['values'] we use
  // this both as the default value for the first dropdown and also as a
  // parameter to pass to the function that retrieves the options for the
  // second dropdown.
  $selected = isset($form_state['values']['dropdown_first']) ? $form_state['values']['dropdown_first'] : key($options_first);

  $form['dropdown_first'] = array(
    '#type' => 'select',
    '#title' => 'Instrument Type',
    '#options' => $options_first,
    '#default_value' => $selected,
    // Bind an ajax callback to the change event (which is the default for the
    // select form type) of the first dropdown. It will replace the second
    // dropdown when rebuilt.
    '#ajax' => array(
      // When 'event' occurs, Drupal will perform an ajax request in the
      // background. Usually the default value is sufficient (eg. change for
      // select elements), but valid values include any jQuery event,
      // most notably 'mousedown', 'blur', and 'submit'.
      // 'event' => 'change',
      'callback' => 'ajax_example_dependent_dropdown_callback',
      'wrapper' => 'dropdown-second-replace',
    ),
  );

  $form['dropdown_second'] = array(
    '#type' => 'select',
    '#title' => $options_first[$selected] . ' ' . t('Instruments'),
    // The entire enclosing div created here gets replaced when dropdown_first
    // is changed.
    '#prefix' => '<div id="dropdown-second-replace">',
    '#suffix' => '</div>',
    // When the form is rebuilt during ajax processing, the $selected variable
    // will now have the new value and so the options will change.
    '#options' => _ajax_example_get_second_dropdown_options($selected),
    '#default_value' => isset($form_state['values']['dropdown_second']) ? $form_state['values']['dropdown_second'] : '',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
  return $form;
}

Comments

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'];
}