0

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 сервиса.

2 ответа 2

4

Можно данные получать с API в виде объекта для удобства:

document.addEventListener('DOMContentLoaded', function() {

  // data from API 
  var data = {
    'Pushkin': {
      'ru': ['Дубровский', 'Капитанская дочка', 'Пиковая дама'],
      'en': ['dybrovskiy', 'kap_dochka', 'pikovaya_dama']
    },
    'Tolstoy': {
      'ru': ['Война и Мир', 'Анна Каренина', 'Три старца'],
      'en': ['war_n_peace', 'anna_karenina', 'tri_starca']
    },
    'Bulgakov': {
      'ru': ['Мастер и Маргарита', 'Собачье сердце'],
      'en': ['master_n_margarita', 'sob_serdce']
    }
  };

  var selectedAuthor = document.getElementById('authors'),
    books = document.getElementById('books');

  // Выбрали автора
  selectedAuthor.addEventListener('change', function() {

    // очищаем старые options
    clearBookList();

    // создаем новый options (из ключа ru --> идет в текст, из en --> в value )
    if (this.value !== 'Default') {
      for (i = 0; i < data[this.value]['en'].length; i++) {
        var opt = document.createElement('option');
        opt.innerText = data[this.value]['ru'][i];
        opt.value = data[this.value]['en'][i];
        books.appendChild(opt);
      }
    }
  });

  function clearBookList() {
    while (books.options.length > 0) {
      books.remove(books.options.length - 1);
    }
  }

});
<html>

<body>
  Выберите писателя:
  <select id="authors" name="authors">
    <option value="Default" selected></option>
    <option value="Pushkin">Пушкин</option>
    <option value="Tolstoy">Толстой</option>
    <option value="Bulgakov">Булгаков</option>
  </select>
  Выберите книгу:
  <select id="books" name="books"></select>
  <hr />
</body>

</html>

1

Как вариант - сунуть в объект.

var optionsArray = {
    "Pushkin": ["|","dybrovskiy|Дубровский","kap_dochka|Капитанская дочка","pikovaya_dama|Пиковая дама"],
    "Tolstoy": ["|","war_n_peace|Война и Мир","anna_karenina|Анна Каренина","tri_starca|Три старца"],
    "Bulgakov": ["|","master_n_margarita|Мастер и Маргарита","sob_serdce|Собачье сердце"]
}

и дёргать так:

optionsArray[s1.value]

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.