Как улучшить код при работе с options

174

03 ноября 2018, 01:20

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

Answer 1

Можно данные получать с 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>

Answer 2

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

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

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