function ajax_example_dependent_dropdown

AJAX-based dropdown example form.

A form with a drop-down whose options are dependent on a choice made in a previous drop-down.

The options in the second drop-down are updated when the first drop-down is changed.

Related topics

File

modules/examples/ajax_example/ajax_example.module, line 548

Hook implementations for the AJAX Example module.

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 as the default value for the first dropdown and as a parameter to pass
  // to the function that retrieves the options for the second drop-down.
  $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 drop-down. It will replace the second
    // drop-down when rebuilt.
    '#ajax' => array(
      // When 'event' occurs, Backdrop will perform an ajax request in the
      // background. Usually, the default value is sufficient, 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;
}