0

Desde un select en html estoy consultando a un endpoint que me trae los estados y dependiendo del estado que me seleccione me traiga sus municipios como podria traer esa data en el segundo select muestro mi codigo:

 function onChangeInput(idTextInput, idErrorSpan) {
            switch (idTextInput) {
                case "state":
                    var state_id = document.getElementById("state").value;
                    var path = `api/states/${state_id}/municipalities`;
                    validateFieldRequest(idErrorSpan, idTextInput, path).then(
                        (jsonBody) => {
                            console.log(jsonBody)
                            
                        }
                    );
                    break;
 <select name="provincia" id="state" onchange="onChangeInput('state')">
  <option>Estado</option>
            <option value="1">Aguascalientes</option>
            <option value="2">Baja California</option>
            <option value="3">Baja California Sur</option>
            <option value="4">Campeche</option>
            <option value="5">Coahuila de Zaragoza</option>
             </select>
                <select name="municipalities" id=municipalities"">
            <option>Municipio</option>


        </select>
con este codigo ya hago llamada al endpoint pero como podria llenar el segundo select con la respuesta que me da el endpoint.

1 respuesta 1

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.