Skip to main content
se añadieron 484 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Desde tu función, tendrías crear los option que resultasen de la lectura de las ciudades almacenadas y asignarlos al select, alcazándolo por su id.

Imaginemos que almacenas las ciudades como objetos, con dos propiedades, id y name, puedes poner algo así en tu función (VER DEMO):

VER DEMO

let allCities = [];
if JSON.parse(localStorage.getItem("CITIES""cities"));
if (allCities !== null) {
  allCities = JSON.parse(localStorage.getItem("cities"))
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Imaginemos que tus ciudades son un elemento simple, la función podría quedar así (:

VER DEMOVER DEMO):

let allCities = JSON.parse(localStorage.getItem("CITIES"));

if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    fragment.append(option);
  }
  selCity.append(fragment);
}

PD

Nótese que hemos usado un fragmento, para hacer append de cada option y sólo al final del bucle hacemos append de ese fragmento en el select. Esta es la práctica recomendada cuando modificamos elementos en bucle, porque si haces append directamente en cada iteracción, el DOM se renderizará en cada append. Hemos usado también createElement porque es el modo más seguro de crear elementos dinámicos, evitando posibles ataques XSS.

Desde tu función, tendrías crear los option que resultasen de la lectura de las ciudades almacenadas y asignarlos al select, alcazándolo por su id.

Imaginemos que almacenas las ciudades como objetos, con dos propiedades, id y name, puedes poner algo así en tu función (VER DEMO):

let allCities = [];
if (localStorage.getItem("CITIES") !== null) {
  allCities = JSON.parse(localStorage.getItem("cities"))
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Imaginemos que tus ciudades son un elemento simple, la función podría quedar así (VER DEMO):

let allCities = JSON.parse(localStorage.getItem("CITIES"));

if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Desde tu función, tendrías crear los option que resultasen de la lectura de las ciudades almacenadas y asignarlos al select, alcazándolo por su id.

Imaginemos que almacenas las ciudades como objetos, con dos propiedades, id y name, puedes poner algo así en tu función:

VER DEMO

let allCities = JSON.parse(localStorage.getItem("cities"));
if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Imaginemos que tus ciudades son un elemento simple, la función podría quedar así:

VER DEMO

let allCities = JSON.parse(localStorage.getItem("CITIES"));

if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    fragment.append(option);
  }
  selCity.append(fragment);
}

PD

Nótese que hemos usado un fragmento, para hacer append de cada option y sólo al final del bucle hacemos append de ese fragmento en el select. Esta es la práctica recomendada cuando modificamos elementos en bucle, porque si haces append directamente en cada iteracción, el DOM se renderizará en cada append. Hemos usado también createElement porque es el modo más seguro de crear elementos dinámicos, evitando posibles ataques XSS.

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Desde tu función, tendrías crear los option que resultasen de la lectura de las ciudades almacenadas y asignarlos al select, alcazándolo por su id.

Imaginemos que almacenas las ciudades como objetos, con dos propiedades, id y name, puedes poner algo así en tu función (VER DEMO):

let allCities = [];
if (localStorage.getItem("CITIES") !== null) {
  allCities = JSON.parse(localStorage.getItem("cities"))
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city.id;
    option.textContent = city.name;
    fragment.append(option);
  }
  selCity.append(fragment);
}

Imaginemos que tus ciudades son un elemento simple, la función podría quedar así (VER DEMO):

let allCities = JSON.parse(localStorage.getItem("CITIES"));

if (allCities !== null) {
  const fragment = new DocumentFragment();
  const selCity = document.getElementById('city');
  for (const city of allCities) {
    const option = document.createElement('option');
    option.value = city;
    option.textContent = city;
    fragment.append(option);
  }
  selCity.append(fragment);
}