function updateSearchField() {
var i = setInterval(function () {
if (document.getElementById("deliveryGeoSearchField")) {
clearInterval(i);
// Replace the element with id 'deliveryGeoSearchField'
var deliveryGeoSearchField = document.getElementById(
"deliveryGeoSearchField",
);
var selectElement = document.createElement("select");
selectElement.id = "deliveryGeoSearchField";
selectElement.name = "deliveryGeoSearchField";
selectElement.className = "snize-exclude-input";
selectElement.style =
"margin-bottom:0px; border-bottom-left-radius: 7px; height:100%; border-top-left-radius: 7px;";

// Add options to the select element
var cities = [
"Pick your City",
"London",
"Milton Keynes",
];

cities.forEach(function (city) {
var option = document.createElement("option");
option.value = city;
option.text = city;
selectElement.appendChild(option);
});

// Replace the existing element with the newly created select element
deliveryGeoSearchField.parentNode.replaceChild(
selectElement,
deliveryGeoSearchField,
);

// Add event listener for 'change' event
selectElement.addEventListener("change", function () {
selectElement.disabled = true;

// Perform actions when the select value changes
document.getElementsByClassName("searchIcon")[0].click();

// Replace the searchIcon element with a refresh element
var searchIcon = document.getElementsByClassName("searchIcon")[0];
var refreshElement = document.createElement("div");
refreshElement.id = "refresh";
refreshElement.style = "color:black";
refreshElement.innerHTML = "✕";

// Add event listener for 'click' event on the refreshElement
searchIcon.parentNode.addEventListener("click", function () {
window.location.reload();
});

// Replace the searchIcon with the refreshElement
searchIcon.parentNode.replaceChild(refreshElement, searchIcon);
});
}
}, 500);
}

ZapietEvent.listen("selected_method", function () {
updateSearchField();
});

updateSearchField();