How to modify contents of drupal select form element based on what was selected in a preceeding select element

Question

First off, I am not a Javascript guru so this may be easy to acccomplish but I just don't know how.

Here is my situation: I have created a form in Drupal 7 and I have two dropdown select box in that form. I would like to change the possible selections in the second dropdown based upon what the user has selected in the first drop down.

Is there a way to add a change listener in Drupal so as to trigger an ajax update of the form?

Thanks.

Answer 1

You can create it with built-in Ajax Framework (you don't need to use javascript). Here is a nice example (and I'll include the code here):

function sandbox_ajax_dropdown($form, &$form_state) {
  $form['sandbox_ajax_dropdown']['province'] = array(
    '#title' => t('Province'),
    '#type' => 'select',
    '#options' => _load_province(),
    '#ajax' => array(
      'event'=>'change',
      'callback' =>'sandbox_ajax_dropdown_city',
      'wrapper' => 'city-wrapper',
    ),
  );

 $form['sandbox_ajax_dropdown']['wrapper'] = array(
    '#prefix' => '<div id="city-wrapper">',
    '#suffix' => '</div>',
  );

  $options = array('- Select city -');
  if (isset($form_state['values']['province'])) {
    $options = _load_city($form_state['values']['province']);
  }

  $form['sandbox_ajax_dropdown']['wrapper']['city'] = array(
    '#title' => t('City'),
    '#type' => 'select',
    '#options' => $options,
  );

  $form["sandbox_ajax_dropdown"]["submit"] = array(
    "#value"  => t("Submit"),
    "#type"   => "submit",
    "#submit" => array("sandbox_ajax_dropdown_submit"),
  );

  return $form;
}

function sandbox_ajax_dropdown_city($form, $form_state) {
  return $form['sandbox_ajax_dropdown']['wrapper'];
}


function sandbox_ajax_dropdown_city($form, $form_state) {
  return $form['sandbox_ajax_dropdown']['wrapper'];
}

function _load_province() {
  $province = array('- Select province -');
  $query = db_select("sandbox_province", "a");
  $query->fields("a", array('id', 'name'));
  $query->condition("a.status", 1);
  $query->orderBy("a.name");
  $result = $query->execute();

  while($row = $result->fetchObject()){
    $province[$row->id] = $row->name;
  }

  return $province;
}

function _load_city($province_id) {
  $city = array('- Select city -');
  $query = db_select("sandbox_city", "a");
  $query->fields("a", array('id', 'name'));
  $query->condition("a.status", 1);
  $query->condition("a.province_id", $province_id);
  $query->orderBy("a.name");
  $result = $query->execute();

  while($row = $result->fetchObject()){
    $city[$row->id] = $row->name;
  }

  return $city;
}

And also take a look at Examples module.

Answer 2

How to do this in Drupal 8? Above steps do not exactly work for Drupal 8. Also in my case the 2 select fields already exist (they were created in BaaseFieldDefinitions, so doing something like this:

$form['sandbox_ajax_dropdown']['wrapper']['city'] = array(
  '#title' => t('City'),
  '#type' => 'select',
  '#options' => $options,
);

doesnt work since the 'city' select already exists. My main issue is how to place the city select inside the target wrapper.