Question

我必须制作2个下拉菜单-alist和booklist。根据列表的选择出现书单。 alist工作正常，它必须在每个选择上显示图像和书本，并且做到这一点。书单是我面临的问题。我尝试配置onchange函数，但是有错误。 booklist选项应该根据选择显示div。当我更改选择时，div相互显示。我只想看到1格，即我选择的格，但随着我的更改，最新的选择会显示在上一个选择的下方其次，booklist仅显示alist = 1的div，还有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>

动态下拉菜单-辅助下拉菜单选项不显示内容

0 个答案: