Para hacer lo que buscas, debes seguir los siguientes pasos:
- Escuchar el evento
change
del select
principal
- Dependiendo del valor de dicho select en cada evento
change
, realizar una llamada Ajax
o tomar los datos de algún objeto local
- Dependiendo del resultado de tu llamada
Ajax
o los datos del objeto local, debes decidir qué hacer en el siguiente paso. Si el retorno es una cadena HTML
con las opciones que deben ir en el select
secundario, solamente debes insertar el resultado dentro del mismo usando Element.innerHTML. Si el resultado es un objeto u array
con las opciones, deberás insertar las opciones dinámicamente dentro del select secundario.
Por ejemplo, observa el siguiente snippet. En el mismo estoy haciendo una petición Ajax
usando fetch cada vez que se varía el select
principal, y con los resultados de esa llamada, relleno el select
secundario creando las opciones dinámicamente. Creo que esto te puede dar una idea de cómo afrontar tu problema:
const asunto = document.getElementById('asunto');
const subasunto = document.getElementById('subasunto');
const url = 'https://jsonplaceholder.typicode.com/';
const labels = {
users: 'name',
todos: 'title',
albums: 'title'
};
const clearSelect = () => {
const options = subasunto.querySelectorAll('option:not([value=""])');
options.forEach(option => subasunto.removeChild(option));
};
const fillSelect = (asunto, json) => {
json.forEach(item => {
const option = document.createElement('option');
option.value = item.id;
option.innerText = item[labels[asunto]];
subasunto.appendChild(option);
});
subasunto.disabled = false;
};
asunto.addEventListener('change', () => {
clearSelect();
subasunto.disabled = true;
const value = asunto.value;
if (value) {
fetch(`${url}${value}`)
.then(result => result.json())
.then(json => fillSelect(value, json));
}
});
<select id="asunto">
<option value="">Selecciona</option>
<option value="users">Usuarios</option>
<option value="todos">Tareas</option>
<option value="albums">Álbumes</option>
</select>
<br>
<select id="subasunto" disabled>
<option value="">Selecciona</option>
</select>