下拉选择加载图像，另一个下拉菜单加载另一列上的信息

【问题标题】：Dropdown selection loads image and another dropdown menu loads info on another column下拉选择加载图像，另一个下拉菜单加载另一列上的信息
【发布时间】：2019-05-08 23:55:40
【问题描述】：

我必须制作一个下拉菜单，其中选择一个选项会在其下加载一个图像，并且它还在图像下显示另一个下拉菜单，其中包含与选择相关的选项。现在第二个下拉菜单，当我选择一个选项时，我需要一个图像和一些信息来加载到同一页面的另一列中。我是JS的新手，所以有点太无知了。

<div class="row">
	<select>
		<option value="1">Please select an author:</option>
		<option value="2">Gillian Flynn</option>
		<option value="3">Robert Galbraith</option>
		<option value="4">Khaled Hosseini</option>
	</select>
</div>

【问题讨论】：

标签： javascript dom-events

【解决方案1】：

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";
  
}

.toggleContent{
  display:none;
}

.defaultContent{
  display:block;
}

<div class="row">
	<select>
		<option value="1">Please select an author:</option>
		<option value="2">Gillian Flynn</option>
		<option value="3">Robert Galbraith</option>
		<option value="4">Khaled Hosseini</option>
	</select>
</div>

<div id="1" class="toggleContent defaultContent">11111111111111111111</div>
<div id="2" class="toggleContent">22222222222222222222</div>
<div id="3" class="toggleContent">33333333333333333333</div>
<div id="4" class="toggleContent">44444444444444444444</div>

【讨论】：