Как подключить между собой 2 раскрывающихся списка

У меня есть 2 раскрывающихся списка(select). В первом выводятся области страны Во втором города определенной область. Как сделать так, чтобы при выбор определенной области в первом списке выводились города этой области в другом списке?

Так я храню данные 2 списков.

static Map<String, List<String>> regions = new HashMap<>();
regions.put("Брестская область", region_brest);
regions.put("Витебская область", region_vitebsk);
regions.put("Гомельская область", region_gomel);
regions.put("Гродненская область", region_grodno);
regions.put("Минская область", region_minsk);
regions.put("Минск", minsk);
regions.put("Могилевская область", region_mogilev);

region_brest = new ArrayList<>();
region_brest.add("Брест");
region_brest.add("Барановичи");
...

region_gomel = new ArrayList<>();
region_gomel.add("Гомель");
region_gomel.add("Брагин");
...

А вот так я вывожу данные

<form class="center" th:action="@{/finish_registration}" th:object="${newUser}" method="post">
<div class="mb-4">
    <div class="form-label col-sm-7"> Your Location </div>
    <div class="col-sm-7 input-group-sm form-label">
        <div style="margin-bottom: 10px">
            <select th:field="*{region}"
                    th:classappend="${#fields.hasErrors('region')} ? 'is-invalid form-control' : form-control"
                    class="form-select form-select-sm" aria-label=".form-select-sm example"
                    placeholder="Region">
                <option th:value="${region.key}" th:each="region : ${regions}" th:text="${region.key}">Region</option>
            </select>

        </div>
        <div>
            <select th:field="*{city}"
                    th:classappend="${#fields.hasErrors('city')} ? 'is-invalid form-control' : form-control"
                    class="form-select form-select-sm" aria-label=".form-select-sm example"
                    placeholder="City">
                <option th:value="${city}" th:each="city:${region}" th:text="${city}">City</option>
            </select>

        </div>
    </div>
</div>
<div class="input_center">
    <input type="submit" value="Registration" class="btn btn-primary btn-sm col-sm-7"/>
</div></form>

1 список отображает область правильно и мне бы хотелось при выборе область динамически пожгружались города выбранной области