My script simply stopped working for my funnel in Colombia. I would like to list the ‘Departments’ and ‘Cities’ in a list, but it’s just not working. I don’t know what I’m doing wrong. Can you help me?
My shipping country form element is set to custom with CO = Colombia.
The Code:
<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(getPlaceholderOption("Seleccione Departamento"), 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(getPlaceholderOption("Seleccione Ciudad"), undefined);
for (const city of citiesOfCountries[countriesSelector.value][statesSelector.value]["cities"]) {
const newOption = new Option(city, city);
citiesSelector.add(newOption, undefined);
}
}
function getPlaceholderOption(text) {
return new Option(text, "", true, true);
}
statesSelector.addEventListener("change", () => getCitiesOfState());
countriesSelector.addEventListener("change", () => getStates());
function loadSelectors() {
getCountries();
getStates();
}
</script>
<script type="text/javascript">
citiesOfCountries["Colombia"] = {
ANT: {
name: "Antioquia",
cities: ["Medellín", "Bello", "Itagüí", "Envigado", "Sabaneta"],
},
ATL: {
name: "Atlántico",
cities: ["Barranquilla", "Soledad", "Malambo"],
},
BOL: {
name: "Bolívar",
cities: ["Cartagena", "Bolívar"],
},
BOY: {
name: "Boyacá",
cities: ["Tunja", "Duitama", "Sogamoso"],
},
CAL: {
name: "Caldas",
cities: ["Manizales", "La Dorada", "Chinchiná"],
},
CAQ: {
name: "Caquetá",
cities: ["Florencia", "San Vicente del Caguán"],
},
CUN: {
name: "Cundinamarca",
cities: ["Bogotá", "Soacha", "Chía"],
},
GUA: {
name: "Guaviare",
cities: ["San José del Guaviare"],
},
HUI: {
name: "Huila",
cities: ["Neiva", "Pitalito"],
},
MAG: {
name: "Magdalena",
cities: ["Santa Marta", "Magdalena"],
},
MET: {
name: "Meta",
cities: ["Villavicencio", "Puerto López"],
},
NAR: {
name: "Nariño",
cities: ["Pasto", "Tumaco"],
},
NSA: {
name: "Norte de Santander",
cities: ["Cúcuta", "Ocaña"],
},
PUT: {
name: "Putumayo",
cities: ["Mocoa", "Puerto Asís"],
},
QUI: {
name: "Quindío",
cities: ["Armenia", "Calarcá"],
},
RIS: {
name: "Risaralda",
cities: ["Pereira", "Dosquebradas"],
},
SAN: {
name: "Santander",
cities: ["Bucaramanga", "Cúcuta", "Barrancabermeja"],
},
SUC: {
name: "Sucre",
cities: ["Sincelejo", "Corozal"],
},
TOL: {
name: "Tolima",
cities: ["Ibagué", "Melgar"],
},
VAC: {
name: "Valle del Cauca",
cities: ["Cali", "Buenaventura", "Palmira"],
},
VAU: {
name: "Vaupés",
cities: ["Mitú"],
},
VDC: {
name: "Vichada",
cities: ["Puerto Carreño"],
},
};
loadSelectors();
</script>