function ajax_example_dependent_dropdown

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

File

ajax_example/ajax_example.module, line 558

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