cargar un select con javascript dependiendo de otro select
- Published
- Reading time
- 3 min read
- Length
- 447 words
On this page
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.