cargar un select con javascript dependiendo de otro select

Cargar un select con javascript dependiendo de otro select

Si desea cargar un select con javascript dependiendo de otro select, es posible mediante el uso de eventos y AJAX. Por ejemplo, si tiene un select para seleccionar el país y desea cargar otro select con las ciudades de ese país seleccionado, puede hacerlo fácilmente utilizando javascript.

Paso 1: Crear los selects

Primero, debemos crear los dos selects en nuestro HTML:

<label for="country-select">País:</label>
<select id="country-select">
  <option value="usa">Estados Unidos</option>
  <option value="canada">Canadá</option>
  <option value="mexico">México</option>
</select>

<label for="city-select">Ciudad:</label>
<select id="city-select"></select>

Paso 2: Agregar un evento al select del país

A continuación, agregamos un evento al select del país para que cuando cambie su valor, se carguen las ciudades correspondientes:

const countrySelect = document.getElementById('country-select');
const citySelect = document.getElementById('city-select');

countrySelect.addEventListener('change', () => {
  // Cargar las ciudades correspondientes
});

Paso 3: Crear una función para cargar las ciudades

Luego, necesitamos crear una función que cargue las ciudades correspondientes utilizando AJAX:

function loadCities(country) {
  // Crear una instancia de XMLHttpRequest
  const xhr = new XMLHttpRequest();
  
  // Configurar la solicitud
  xhr.open('GET', `/api/cities?country=${country}`);
  
  // Manejar la respuesta
  xhr.onload = () => {
    if (xhr.status === 200) {
      // Limpiar el select de ciudades
      citySelect.innerHTML = '';
      
      // Agregar las opciones de ciudades
      const cities = JSON.parse(xhr.responseText);
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.id;
        option.text = city.name;
        citySelect.appendChild(option);
      });
    } else {
      console.error(xhr.statusText);
    }
  };
  
  // Manejar los errores de red
  xhr.onerror = () => {
    console.error(xhr.statusText);
  };
  
  // Enviar la solicitud
  xhr.send();
}

Paso 4: Llamar a la función para cargar las ciudades

Finalmente, llamamos a la función para cargar las ciudades dentro del evento del select del país:

countrySelect.addEventListener('change', () => {
  const country = countrySelect.value;
  loadCities(country);
});

Aquí está el código completo:

<label for="country-select">País:</label>
<select id="country-select">
  <option value="usa">Estados Unidos</option>
  <option value="canada">Canadá</option>
  <option value="mexico">México</option>
</select>

<label for="city-select">Ciudad:</label>
<select id="city-select"></select>

<script>
const countrySelect = document.getElementById('country-select');
const citySelect = document.getElementById('city-select');

function loadCities(country) {
  const xhr = new XMLHttpRequest();
  
  xhr.open('GET', `/api/cities?country=${country}`);
  
  xhr.onload = () => {
    if (xhr.status === 200) {
      citySelect.innerHTML = '';
      
      const cities = JSON.parse(xhr.responseText);
      cities.forEach(city => {
        const option = document.createElement('option');
        option.value = city.id;
        option.text = city.name;
        citySelect.appendChild(option);
      });
    } else {
      console.error(xhr.statusText);
    }
  };
  
  xhr.onerror = () => {
    console.error(xhr.statusText);
  };
  
  xhr.send();
}

countrySelect.addEventListener('change', () => {
  const country = countrySelect.value;
  loadCities(country);
});
</script>

Este es solo un ejemplo y puede adaptarse a cualquier necesidad similar. También es posible utilizar frameworks como React, Angular o Vue para simplificar el código y hacerlo más fácil de mantener.