Динамические раскрывающиеся списки - дополнительные раскрывающиеся параметры не отображают содержимое - PullRequest
Новая
       23

Динамические раскрывающиеся списки - дополнительные раскрывающиеся параметры не отображают содержимое

0 голосов
/ 13 мая 2019

Мне пришлось сделать 2 выпадающих меню - список и список.Список книг появляется на основе выбора списка.Alist работает отлично, он должен отображать изображение и список книг на каждый выбор, и он делает это.Список книг, где я сталкиваюсь с проблемой.Я пытался настроить функцию onchange, но есть ошибки.Предполагается, что в параметрах списка книг отображаются элементы в зависимости от выбора.div меняются друг на друга, когда я меняю выбор.Я хочу видеть только 1 div, тот, который я выбрал, но когда я меняюсь, последний выбор отображается под предыдущим выбором. Во-вторых, в списке книг отображаются только div для alist = 1, есть также 2 и 3, но этоничего не делает, когда я пытаюсь загрузить книги другого автора.Пожалуйста, посмотрите и помогите мне. 

document.getElementsByTagName('select')[0].onchange = function() {

  var elements = document.getElementsByClassName("toggleContent");

  for (var i = 0, length = elements.length; i < length; i++) {
    elements[i].style.display = 'none';
  }

  var value = this.options[this.selectedIndex].value;

  document.getElementById(value).style.display = "block";
}

function book() {
  for (var i = 0; i < 2; i++) {
    document.getElementsByClassName('book')[i].style.display = "hidden";
  }

  var alist = document.getElementById("alist");
  var gilf = document.getElementById("GF");
  var rgli = document.getElementById("RG");
  var khos = document.getElementById("KH");

  if (alist.value == 1 && gilf.value == 1) {
    document.getElementsByClassName('sharpObjects')[0].style.display = "block";
  } else if (alist.value == 1 && gilf.value == 2) {
    document.getElementsByClassName('darkplaces')[0].style.display = "block";
  } else if (alist.value == 1 && gilf.value == 3) {
    document.getElementsByClassName('gonegirl')[0].style.display = "block";
  } else if (alist.value == 2 && rgli.value == 0) {
    document.getElementsByClassName('cuckoo')[0].style.display = "hidden";
  }

}
<div class="row">
  <select id="alist" onchange="">
    <option value="0">Please select an author:</option>
    <option value="1">Gillian Flynn</option>
    <option value="2">Robert Galbraith</option>
    <option value="3">Khaled Hosseini</option>
  </select>
</div>
<br/><br/>
<div id="0" class="toggleContent defaultContent"><img src="images/zero.jpg"></div>
<div id="1" class="toggleContent"><img src="images/one.jpg"><br/><br/>
  <select id="GF" onchange="book()">
    <option value="0">Please select a book</option>
    <option value="1">Sharp Objects</option>
    <option value="2">Dark Places</option>
    <option value="3">Gone Girl</option>
  </select>
</div>
<div id="2" class="toggleContent"><img src="images/two.jpg"><br/><br/>
  <select id="RG" onchange="book()">
    <option value="0">Please select a book</option>
    <option value="1">The Cuckoo's Calling</option>
    <option value="2">The Silkworm</option>
    <option value="3">Career of Evil</option>
  </select>
</div>
<div id="3" class="toggleContent"><img src="images/three.jpg"><br/><br/>
  <select id="KH" onchange="book()">
    <option value="0">Please select a book</option>
    <option value="1">The Kite Runner</option>
    <option value="2">A Thousand Splendid Suns</option>
    <option value="3">And The Mountains Echoed</option>
  </select>
</div>
</div>
<div class="inner" id="col2" style="width: 700px;float: right; margin-right: 50px">
  <div class="book sharpObjects" style="display: none"> <img src="images/GF1.jpg"></div>
  <div class="book darkplaces" style="display: none"> <img src="images/GF2.jpg"></div>
  <div class="book gonegirl" style="display: none"> <img src="images/GF3.jpg"></div>
  <div class="book cuckoo" style="display: none"> <img src="images/RG1.jpg"></div>
  <div class="book sworm" style="display: none"> <img src="images/RG2.jpg"></div>
  <div class="book evil" style="display: none;"> <img src="images/RG3.jpg"></div>
  <div class="book kite" style="display: none"> <img src="images/KH1.jpg"></div>
  <div class="book suns" style="display: none;"><img src="images/KH2.jpg"></div>
  <div class="book echo" style="display: none;"><img src="images/KH3.jpg"></div>
</div>
...