Есть у меня таблица в ней ячейки которые и представляют собой
select
<td>
<select id="select1">
</select>
</td>
<td>
<select id="select2">
</select>
</td>
Их
option я получаю с помощью
fetch
вот такой конструкцией
selectElement1.addEventListener('change', () => {
const selectedValue = selectElement1.value;
// Очистить второй select-элемент
selectElement2.innerHTML = '';
if (selectedValue === 'Чёрно-белая печать') {
fetch('http://пример/printerCB')
.then(response => response.json())
.then(data => {
data.forEach(item => {
const option = document.createElement('option');
option.value = item.printer;
option.textContent = item.printer;
selectElement2.appendChild(option);
});
})
.catch(error => {
console.error(error);
// Обработать ошибку
});
} else if (selectedValue === 'Цветная печать') {
fetch('http://пример/printerColor')
.then(response => response.json())
.then(data => {
data.forEach(item => {
const option = document.createElement('option');
option.value = item.printer;
option.textContent = item.printer;
selectElement2.appendChild(option);
});
})
.catch(error => {
console.error(error);
// Обработать ошибку
});
}
});
И эта конструкция работает, но не совсем так как я хочу. Получилось у меня так, что после загрузки страницы я получаю вот такую картину
и как видно нет вариантов во второй ячейке и так пока я не выберу "Цветная печать" в первом выборе, после чего вся эта конструкция начинает работать полностью правильно. Но я хотел бы убрать этот косяк с тем что нет первичного значения второго столбца, но не могу догадаться как это сделать.
