Lo que pides en sí no es una tarea trivial. Pero básicamente podés agregarle un eventListener
al select
de los estados y dependiendo del value
del option
podés hacer un request a la API.
Si tuvieras dos Selects:
const stateSelect = document.querySelector("#state");
const citySelect = document.querySelector("#municipalities");
Agrégale un eventListener
al stateSelect
.
stateSelect.addEventListener("change", (e) => {
if (e.target.value === "1") {
// haz request a la API trayendo los municipios
}
if (e.target.value === "2") {
// haz request a la API trayendo los municipios
}
if (e.target.value === "3") {
// haz request a la API trayendo los municipios
}
});
Te recomiendo le des un value
al option Estado
así cuando se seleccione esa opción se remuevan las opciones anteriormente generadas.
<select name="provincia" id="state" onchange="onChangeInput('state')">
<option value='default'>Estado</option> // <-- agrega `value` default
// ..demás opciones
</select>
if (e.target.value === "default") {
const opt = document.createElement("option");
opt.value = "default";
const content = document.createTextNode("Municipio");
opt.appendChild(content);
citySelect.innerHTML = "";
citySelect.appendChild(opt);
}
El eventListener
quedarías así entonces
stateSelect.addEventListener("change", (e) => {
if (e.target.value === "default") {
const opt = document.createElement("option");
opt.value = "default";
const content = document.createTextNode("Municipio");
opt.appendChild(content);
citySelect.innerHTML = "";
citySelect.appendChild(opt);
}
if (e.target.value === "1") {
// haz request a la API trayendo los municipios
}
if (e.target.value === "2") {
// haz request a la API trayendo los municipios
}
if (e.target.value === "CA") {
// haz request a la API trayendo los municipios
}
});
Ya cuando recibas la data puedes recorrer el Array
de Municipios y agregarlos como opciones al municipalities
select con una función.
const stateSelect = document.querySelector("#state");
const citySelect = document.querySelector("#municipalities");
const createOptions = (municipio) => {
const opt = document.createElement("option");
opt.value = municipio.value;
const content = document.createTextNode(municipio.name);
opt.appendChild(content);
return opt;
};
const appendOptions = (options) => {
citySelect.innerHTML = "";
options.forEach((o) => citySelect.appendChild(o));
};
stateSelect.addEventListener("change", (e) => {
if (e.target.value === "default") {
const opt = document.createElement("option");
opt.value = "default";
const content = document.createTextNode("Municipio");
opt.appendChild(content);
citySelect.innerHTML = "";
citySelect.appendChild(opt);
}
if (e.target.value === "1") {
const municipios = fetch(`my-api/municipio/1`)
const options = municipios.map(createOptions);
appendOptions(options);
}
if (e.target.value === "2") {
const municipios = fetch(`my-api/municipio/2`)
const options = municipios.map(createOptions);
appendOptions(options);
}
if (e.target.value === "3") {
const municipios = fetch(`my-api/municipio/3`)
const options = municipios.map(createOptions);
appendOptions(options);
}
});
Tendrás que modificar el código a tu caso específico pero es una implementación inicial. Échale un ojo a este sandbox. Puedes prescindir del los if
statements en el eventListener
. Pero así es más explícito.