I have 3 select drop-downs, selecting a value in the first populates the second using ajax, selecting the second populates the third. However when I change the value of the first select it doesn't reset the second (If I already chose the first and the second drop down initially).


  • Choose an option from the first
  • This populates the second select with options A, B and C
  • If I change the first one it won't reset the value if that value existed on the first option
  • So if our first option called A, B and C and we change the first drop-down to something else but it calls C, D and E; if C was selected in the second drop-down it doesn't reset since it existed in both ajax calls, this then doesn't load in the third select unless you select a different option in the second select.

Basically what I need is to reset the second and third select whenever the first changes.

  • could be to do with your index's in your options, jQuery onChange wont fire of value doesn't change. Try changing 'event' => 'change' to 'event' => 'click' to see if it's related to that. Nov 21 '14 at 19:45
  • can you show the code you're using - it's impossible to guess at what is going on...
    – Geoff
    Nov 23 '14 at 17:04
  • @Geoff I included a link to a pastebin, would it be better If I listed the code here? I avoided it cause it's very long.
    – josephleon
    Nov 24 '14 at 12:23
  • it's always better not to rely on a link if possible, since the link can change, the site can close, etc. besides, you included the relevant code in your answer, so it's definitely not too long.
    – Geoff
    Nov 24 '14 at 16:30


 * The ajax call to return data for the printer model select.
 * @return array             An array of settings.
function first_ajax_callback(&$form, &$form_state) {
  // Reset conditional select values.
  $form['field_printer_model_value']['#value'] = array('All' => 'Select Printer Model');
  $form['field_printer_type_tid']['#value'] = array('All' => 'Select Device Type');

  // $commands = array();
  $commands[] = ajax_command_replace("#second_dropdown", drupal_render($form['field_printer_type_tid']));
  $commands[] = ajax_command_replace("#third_dropdown", drupal_render($form['field_printer_model_value']));

  return array('#type' => 'ajax', '#commands' => $commands);

In the above call I set the #value of the selects I want to reset. These lines properly reset two later dependent selects:

$form['field_printer_model_value']['#value'] = array('All' => 'Select Printer Model');
$form['field_printer_type_tid']['#value'] = array('All' => 'Select Device Type');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.