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 = [
                "Choisissez votre ville",
                "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].parentNode.dispatchEvent(new KeyboardEvent('keyup', {
                    'key': 'Enter'
                }));

                // 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();

#deliveryGeoSearchField {
        flex-grow: 1 !important;
}