Load a field

index.html

<script>
    const changes = []
    let pending = null

    function stateChanged() {
        if (changes.find(c => c.id === "states")) {
            return
        }
        changes.push("states")
        // tiny timeout as simple way to rate limit changes, better approaches exist
        setTimeout(processChanges, 500)
    }

    function processChanges() {
        const changeKey = changes.shift()

        if (changeKey !== "states") {
            return
        }

        const stateName = document.getElementById("states").value
        const cities = document.getElementById("cities")
        const newController = new AbortController()

        if (cities.dataset.state === stateName) {
            return
        }

        pending?.abort()
        pending = newController

        cities.disabled = true
        cities.innerHTML = ""
        cities.add(new Option("Loading cities for " + stateName, 'fake'))
        cities.selectedIndex = 0
        cities.dataset.state = stateName

        console.log("Fetching cities for " + stateName)
        // fake a fetch that delays
        setTimeout(() => {
            if (newController.signal.aborted) {
                return
            }
            cities.innerHTML = ""
            cities.add(new Option("Fake loaded cities for " + stateName, 'fake'))
            cities.disabled = false
        }, 1000)
    }
</script>

<select id="states" onchange="stateChanged()">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
</select>

<select id="cities" disabled></select>