Hola por favor ayuda como puedo conseguir el codigo para que se desplace en el formulario de registro la provincias con las ciudades SOY DE ECUADOR
Hola @Marco !
Para lograr un listado desplegable de ciudades y departamento de Ecuador, sigue los pasos a continuación:
1- Copia este código:
<script>
var citiesOfCountries = [];
const countriesSelector = document.querySelector("select[name='shipping_country']");
const statesSelector = document.querySelector("select[name='shipping_state']");
const citiesSelector = document.querySelector("select[name='shipping_city']");
countriesSelector.innerHTML = null;
function getCountries() {
statesSelector.innerHTML = null;
citiesSelector.innerHTML = null;
for (const country of Object.keys(citiesOfCountries)) {
const newOption = new Option(country, country);
countriesSelector.add(newOption, undefined);
}
}
function getStates() {
statesSelector.innerHTML = null;
citiesSelector.innerHTML = null;
statesSelector.add(getEmptyOption(), undefined);
for (const state of Object.keys(citiesOfCountries[countriesSelector.value])) {
const newOption = new Option(citiesOfCountries[countriesSelector.value][state]["name"], state);
statesSelector.add(newOption, undefined);
}
}
function getCitiesOfState() {
citiesSelector.innerHTML = null;
citiesSelector.add(getEmptyOption(), undefined);
for (const city of citiesOfCountries[countriesSelector.value][statesSelector.value]["cities"]) {
const newOption = new Option(city, city);
citiesSelector.add(newOption, undefined);
}
}
function getEmptyOption() {
return new Option("", "");
}
statesSelector.addEventListener("change", () => getCitiesOfState());
countriesSelector.addEventListener("change", () => getStates());
function loadSelectors() {
getCountries();
getStates();
}
</script>
<script type="text/javascript">
citiesOfCountries["Ecuador"] = {
AZU: {
name: "Azuay",
cities: ["Cuenca", "Gualaceo", "Paute"]
},
BOL: {
name: "Bolívar",
cities: ["Guaranda", "San Miguel"]
},
CAN: {
name: "Cañar",
cities: ["Azogues", "La Troncal"]
},
CAR: {
name: "Carchi",
cities: ["Tulcán", "San Gabriel"]
},
CHI: {
name: "Chimborazo",
cities: ["Riobamba", "Guano"]
},
COT: {
name: "Cotopaxi",
cities: ["Latacunga", "La Maná"]
},
ESM: {
name: "Esmeraldas",
cities: ["Esmeraldas", "Atacames"]
},
GAL: {
name: "Galápagos",
cities: ["Puerto Ayora", "Puerto Baquerizo Moreno"]
},
GUA: {
name: "Guayas",
cities: ["Guayaquil", "Daule", "Samborondón", "Durán"]
},
IMB: {
name: "Imbabura",
cities: ["Ibarra", "Otavalo", "Cotacachi"]
},
LOJ: {
name: "Loja",
cities: ["Loja", "Catamayo"]
},
LOR: {
name: "Los Ríos",
cities: ["Babahoyo", "Quevedo", "Ventanas"]
},
MAN: {
name: "Manabí",
cities: ["Portoviejo", "Manta", "Chone", "Jipijapa"]
},
MOR: {
name: "Morona Santiago",
cities: ["Macas", "Sucúa"]
},
NAP: {
name: "Napo",
cities: ["Tena", "Archidona"]
},
ORE: {
name: "Orellana",
cities: ["Coca", "Loreto"]
},
PAS: {
name: "Pastaza",
cities: ["Puyo", "Santa Clara"]
},
PCH: {
name: "Pichincha",
cities: ["Quito", "Cayambe", "Rumiñahui"]
},
SDC: {
name: "Santa Elena",
cities: ["Santa Elena", "La Libertad", "Salinas"]
},
SDN: {
name: "Santo Domingo de los Tsáchilas",
cities: ["Santo Domingo"]
},
SUC: {
name: "Sucumbíos",
cities: ["Nueva Loja (Lago Agrio)", "Shushufindi"]
},
TUN: {
name: "Tungurahua",
cities: ["Ambato", "Baños de Agua Santa"]
},
ZCH: {
name: "Zamora Chinchipe",
cities: ["Zamora", "Yantzaza"]
}
};
loadSelectors();
</script>
2. Pégalo en CUSTOM CODES> BODY HTML
3. Guarda los cambios
4. Luego configura el campo de ESTADO de la siguiente manera:
5. Y el campo de CIUDAD de la siguiente manera:
Guarda los cambios y listo! ![]()
En el caso que necesites modificar los estados o ciudades lo puedes hacer dentro del código.
Recuerda que para que funcione el código tiene que estar configurado tal cual en las instrucciones y el campo del país tiene que estar configurado correctamente con su código y nombre.
IMPORTANTE ![]()
Para que el código funcione es necesario tener tu dominio propio conectado


