Динамическая подгрузка данных для select в форме. Как обновить выбираемые значения?

Question

[Andrej Kopp]

Всем привет. Столкнулся с проблемой. Имеется форма с выбором страны, региона и города. При первом поиске и выборе необходимых данных всё хорошо подставляется, но если выбрать другую страну с районом, то при динамичном поиске города по средством input type="text" с библиотекой typeahead.js не переключается страна и регион, хотя она добавляется по средством request.

Есть ещё такой момент, у некоторых стран нет регионов и это поле отдаёт NULL, на сайте я пытаюсь у стран, которые не имеют регионы по клику выводить сразу форму с поиском города.

Вот что удалось наковырять.

<script type="text/javascript">
    $("#country").change(function(){
        var country_id = $(this).val();
        var region_id = $('select#region').find("option:selected").attr('data-regionid');
        var token = $("input[name='_token']").val();
        console.log(country_id);
        console.log(region_id);
        
        $.ajax({
            url: "https://battles.bezb.online/selectregion",
            method: 'POST',
            data: {country_id:country_id, _token:token},
            success: function(data) {
                if(data.options.includes('data-regionid') === true) {
                    $('.regions').removeClass('hidden');
                    $('.cities').addClass('hidden');
                    
                    $("#region").html('');
                    $("#region").html(data.options);
                    
                } else {
                    $('.cities').removeClass('hidden');
                    $('.regions').addClass('hidden');
                    $('input#city_search').val('');
                }
            }
        });
    });
    
    $("#region").change(function(){
        
        var region_id = $(this).val();
        var country_id = $(this).find("option:selected").attr('data-countryid');
        var token = $("input[name='_token']").val();

        $('input#city_search').val('');
        $('.cities').removeClass('hidden');
    
        var url = "https://battles.bezb.online/autocomplete";
        $('input.typeahead').typeahead({
            minLength: 3,
            source:  function (query, process) {
                return $.get(url, {region_id:region_id, country_id:country_id, query: query }, function (data) {
                    return process(data);
                });
            },
            afterSelect: function (data) {
              $('#city').val(data.id);
            }
        });
    });
</script>

Посмотреть работу формы можно на сайте https://battles.bezb.online/countryform

Во вкладке Network у браузера Chrome генерируются такие запросы:

Request URL: https://battles.bezb.online/autocomplete?region_id=1082931&country_id=1&query=%D0%9E%D0%BC%D1%81%D0%BA

Такая ссылка должна генерироваться при выборе страны вместе с регионом. Если выбирать страну без региона, то ссылка должна становиться такой:

Request URL: https://battles.bezb.online/autocomplete?country_id=5&query=%D0%91%D0%B0%D0%BA%D1%83

Answer 1

[Andrej Kopp]

Решил удалением экземпляра перед его инициализацией:
$('input.typeahead').typeahead('destroy');