[ureech]

Привет.

<div class="field1 mt-3 col-12">
                <label>Тип отчётности</label>
                <select name="select-type" class="form-select select-type w-100">
                    <option value="staf">опшин1</option>
                    <option value="indicate">опшин2</option>
                </select>
            </div>
            <div class="field1 type-staf mt-3 col-12">
                <label>Название отчётности</label>
                <select name="type_ajax" class="form-select select-type-ajax w-100">
                </select>
            </div>

Второй селект заполняется из ответа запроса при загрузки страницы. Тут всё работает.

При изменении значения первого селекта приходят обновлённые данные для второго. И я снова создаю элементы и вставляю их в селект.

$.ajax({
            ...
            success: function (data) {
                type_ajax.options.length = 0;
                for (var i = 0; i < data.reporting.length; i++) {
                    var opt = document.createElement('option');
                    opt.value = i;
                    opt.innerHTML = data.reporting[i];
                    document.querySelector('.select-type-ajax').appendChild(opt)
                }
                
            }
         
        });

Но теперь у меня во втором селекте всегда первое значение опшина. Никак не победить. Если не очень понятно, то визуально можно глянуть тут, на мобильном разрешении браузера. Или с телефона.