var s1 = document.getElementById('authors');
var s2 = document.getElementById('books');
function populate(){
s2.innerHTML = "";
var optionArray =[];
if(s1.value == "Pushkin"){
optionArray = ["|","dybrovskiy|Дубровский","kap_dochka|Капитанская дочка","pikovaya_dama|Пиковая дама"];
} else if(s1.value == "Tolstoy"){
optionArray = ["|","war_n_peace|Война и Мир","anna_karenina|Анна Каренина","tri_starca|Три старца"];
} else if(s1.value == "Bulgakov"){
optionArray = ["|","master_n_margarita|Мастер и Маргарита","sob_serdce|Собачье сердце"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
s1.addEventListener('change',populate);
<html>
<body>
Выберите писателя:
<select id="authors" name="authors">
<option value="Pushkin">Пушкин</option>
<option value="Tolstoy">Толстой</option>
<option value="Bulgakov">Булгаков</option>
</select>
Выберите книгу:
<select id="books" name="books"></select>
<hr />
</body>
</html>
Добрый день. Помогите разобраться. На странице надо реализовать два options с вариантами выбора. Я вроде как сделал. Но мне не нравится "лапша" из if-else. Как можно избежать подобного? В примере всего три автора а на практике может получиться больше. Поскольку получать список книг и авторов я планирую с api сервиса.