Saludos compañeros y de antemano gracias por la ayuda.

Estoy programando un formulario con Drupal. Tengo un campo Que muestra en en select los departamentos o provincias de mis país. Al seleccionar cada departamento o provincia, este muestra las ciudades y municipios en otro campo select.

Para aclarar: Un campo select de Departamentos o Provincias llena por ajax otro select con ciudades. Funciona bien, envía bien y almacena bien en la base de datos. El asunto no me cuadra cuando refresco la página desde el botón de recargar del navegador. Los campos que están definidos desde el formulario se conservar, pero el campo ajax vuelve a su estado natural. En otras palabras: el select conserva el departamento o provincia y el select donde se llena con AJAX las ciudades se limpia . Este comportamiento sucede cuando recargo el navegador. La solución es que el usuario debe volver a escoger el departamento para seleccionar la ciudad.

Agradezco la ayuda.

Definición de los campos para Provincias y ciudades

//    Departamento de expedición del documento. Solo para registro civil, cédula y tarjeta de identidad
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento']['departamento_expedicion_documento'] = [
      '#type' => 'select',
      '#title' => $this->t('Departamento de expedición del documento (obligatorio)'),
      '#description' => $this->t('Seleccion el departamento donde sacó su documento de identificación'),
      '#required' => TRUE,
      '#required_error' => $this->t('El departamento de expedición del documento es obligatorio'),
      '#options' => $this->departamento(),
      '#prefix' => '<div class="has-text-centered mb-3"><span class="cuadro-numero py-2 px-2 is-inline-block has-text-white border-radius-20">6.2</span></div>',
      '#ajax' => [
        'callback' => [$this, 'ciudadesColombia'],
        'progress' => [
          'type' => 'bar',
          'message' => $this->t('Consultando...'),
        ],
        'disable-refocus' => TRUE,
      ],
      '#states' => [
        'required' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
      '#validated' => TRUE,
    ];

//    Ciudad de expedición del documento
    $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];

Función de llamada AJAX

public function ciudadesColombia(&$form, FormStateInterface $form_state) {

    $codigo_departamento = $form_state->getValue(
      'departamento_expedicion_documento'
    );

    if (!empty($codigo_departamento)) {
      $cliente = Drupal::httpClient();
      $datos_municipios = $cliente->get(
        "https://www.datos.gov.co/resource/xdk5-pm3f.json?c_digo_dane_del_departamento={$codigo_departamento}"
      )->getBody();

      $ciudades = Drupal\Component\Serialization\Json::decode($datos_municipios);

      $data_ciudades = [];

      foreach ($ciudades as &$ciudad) {
        $data_ciudades[$ciudad['c_digo_dane_del_municipio']] = $ciudad['municipio'];
      }

      ksort($data_ciudades);

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = $data_ciudades;

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#validate'] = TRUE;

    } else {
      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = ['' => '- Seleccionar -'];
    }

    $data_form = $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento'];

    $response = new AjaxResponse();

    $response->addCommand(new ReplaceCommand('#ciudades-colombia', $data_form));

    return $response;

  }

Saludos compañeros y de antemano gracias por la ayuda.

Estoy programando un formulario con Drupal. Tengo un campo Que muestra en en select los departamentos o provincias de mis país. Al seleccionar cada departamento o provincia, este muestra las ciudades y municipios en otro campo select.

Para aclarar: Un campo select de Departamentos o Provincias llena por ajax otro select con ciudades. Funciona bien, envía bien y almacena bien en la base de datos. El asunto no me cuadra cuando refresco la página desde el botón de recargar del navegador. Los campos que están definidos desde el formulario se conservar, pero el campo ajax vuelve a su estado natural. En otras palabras: el select conserva el departamento o provincia y el select donde se llena con AJAX las ciudades se limpia . Este comportamiento sucede cuando recargo el navegador. La solución es que el usuario debe volver a escoger el departamento para seleccionar la ciudad.

Agradezco la ayuda.

Definición de los campos para Provincias y ciudades

//    Departamento de expedición del documento. Solo para registro civil, cédula y tarjeta de identidad
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento']['departamento_expedicion_documento'] = [
      '#type' => 'select',
      '#title' => $this->t('Departamento de expedición del documento (obligatorio)'),
      '#description' => $this->t('Seleccion el departamento donde sacó su documento de identificación'),
      '#required' => TRUE,
      '#required_error' => $this->t('El departamento de expedición del documento es obligatorio'),
      '#options' => $this->departamento(),
      '#prefix' => '<div class="has-text-centered mb-3"><span class="cuadro-numero py-2 px-2 is-inline-block has-text-white border-radius-20">6.2</span></div>',
      '#ajax' => [
        'callback' => [$this, 'ciudadesColombia'],
        'progress' => [
          'type' => 'bar',
          'message' => $this->t('Consultando...'),
        ],
        'disable-refocus' => TRUE,
      ],
      '#states' => [
        'required' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
      '#validated' => TRUE,
    ];

//    Ciudad de expedición del documento
    $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];

Función de llamada AJAX

public function ciudadesColombia(&$form, FormStateInterface $form_state) {

    $codigo_departamento = $form_state->getValue(
      'departamento_expedicion_documento'
    );

    if (!empty($codigo_departamento)) {
      $cliente = Drupal::httpClient();
      $datos_municipios = $cliente->get(
        "https://www.datos.gov.co/resource/xdk5-pm3f.json?c_digo_dane_del_departamento={$codigo_departamento}"
      )->getBody();

      $ciudades = Drupal\Component\Serialization\Json::decode($datos_municipios);

      $data_ciudades = [];

      foreach ($ciudades as &$ciudad) {
        $data_ciudades[$ciudad['c_digo_dane_del_municipio']] = $ciudad['municipio'];
      }

      ksort($data_ciudades);

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = $data_ciudades;

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#validate'] = TRUE;

    } else {
      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = ['' => '- Seleccionar -'];
    }

    $data_form = $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento'];

    $response = new AjaxResponse();

    $response->addCommand(new ReplaceCommand('#ciudades-colombia', $data_form));

    return $response;

  }

Saludos compañeros y de antemano gracias por la ayuda.

Estoy programando un formulario con Drupal. Tengo un campo Que muestra en en select los departamentos o provincias de mis país. Al seleccionar cada departamento o provincia, este muestra las ciudades y municipios en otro campo select.

Para aclarar: Un campo select de Departamentos o Provincias llena por ajax otro select con ciudades. Funciona bien, envía bien y almacena bien en la base de datos. El asunto no me cuadra cuando refresco la página desde el botón de recargar del navegador. Los campos que están definidos desde el formulario se conservar, pero el campo ajax vuelve a su estado natural. En otras palabras: el select conserva el departamento o provincia y el select donde se llena con AJAX las ciudades se limpia . Este comportamiento sucede cuando recargo el navegador. La solución es que el usuario debe volver a escoger el departamento para seleccionar la ciudad.

Agradezco la ayuda.

Definición de los campos para Provincias y ciudades

//    Departamento de expedición del documento. Solo para registro civil, cédula y tarjeta de identidad
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];
    $form['datos_solicitante']['contenedor_datos']
    ['column_departamento_expedicion_documento']['departamento_expedicion_documento'] = [
      '#type' => 'select',
      '#title' => $this->t('Departamento de expedición del documento (obligatorio)'),
      '#description' => $this->t('Seleccion el departamento donde sacó su documento de identificación'),
      '#required' => TRUE,
      '#required_error' => $this->t('El departamento de expedición del documento es obligatorio'),
      '#options' => $this->departamento(),
      '#prefix' => '<div class="has-text-centered mb-3"><span class="cuadro-numero py-2 px-2 is-inline-block has-text-white border-radius-20">6.2</span></div>',
      '#ajax' => [
        'callback' => [$this, 'ciudadesColombia'],
        'progress' => [
          'type' => 'bar',
          'message' => $this->t('Consultando...'),
        ],
        'disable-refocus' => TRUE,
      ],
      '#states' => [
        'required' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
      '#validated' => TRUE,
    ];

//    Ciudad de expedición del documento
    $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento'] = [
      '#type' => 'container',
      '#attributes' => [
        'class' => ['column', 'is-4'],
      ],
      '#states' => [
        'visible' => [
          ':input[name="tipo_documento_solicitante"]' => [
            ['value' => '1'],
            ['value' => '2'],
            ['value' => '3'],
          ],
        ],
      ],
    ];

Función de llamada AJAX

public function ciudadesColombia(&$form, FormStateInterface $form_state) {

    $codigo_departamento = $form_state->getValue(
      'departamento_expedicion_documento'
    );

    if (!empty($codigo_departamento)) {
      $cliente = Drupal::httpClient();
      $datos_municipios = $cliente->get(
        "https://www.datos.gov.co/resource/xdk5-pm3f.json?c_digo_dane_del_departamento={$codigo_departamento}"
      )->getBody();

      $ciudades = Drupal\Component\Serialization\Json::decode($datos_municipios);

      $data_ciudades = [];

      foreach ($ciudades as &$ciudad) {
        $data_ciudades[$ciudad['c_digo_dane_del_municipio']] = $ciudad['municipio'];
      }

      ksort($data_ciudades);

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = $data_ciudades;

      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#validate'] = TRUE;

    } else {
      $form['datos_solicitante']['contenedor_datos']
      ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento']['#options'] = ['' => '- Seleccionar -'];
    }

    $data_form = $form['datos_solicitante']['contenedor_datos']
    ['column_ciudad_expedicion_documento']['ciudad_expedicion_documento'];

    $response = new AjaxResponse();

    $response->addCommand(new ReplaceCommand('#ciudades-colombia', $data_form));

    return $response;

  }