Вам нужны два списка:
- Список стран
- Список городов
При первой прогрузке страницы когда вы определили город пользователя по ip делаете следующее:
1. В первом списке стран делаете selected страны к которой относится город пользователя.
2. Во второй список прогружаете доступные города по выбранной стране из первого списка.
3. Ставите selected городу пользователя.
Когда страница полностью прогружается, пользователь имеет список стран, выбранную страну, список городов по выбранной стране и выбранный город.
Что может сделать пользователь:
- Выбрать соседний город, тут проблем нет, из вашего прогруженного второго списка он делает selected другому городу.
- Выбрать другую страну, пользователь из первого списка выбирает соседнюю страну, вы делаете ajax запрос по CountryId на свой сервис для обновления второго списка(доступные города в выбранной стране), пользователь выбирает город.
После выше упомянутых действий вы имеете подтвержденный CityId, как обновлять контент уже зависит от вашей архитектуры и работы сайта. Тут либо вы куда-то пишете выбранный Id города и обновляете страницу(если пользователь поменял свой CityId), либо если у вас все красиво, то просто перезапрашиваете контент у вашего бекэнд сервиса по нужному CityId.