Привет.
<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)
}
}
});
Но теперь у меня во втором селекте всегда первое значение опшина. Никак не победить. Если не очень понятно, то визуально можно глянуть
тут, на мобильном разрешении браузера. Или с телефона.