Question

我必须创建一个下拉菜单，在其中选择选项会在其下加载图像，它还会在图像下显示另一个下拉菜单，其中包含与选择相关的选项。现在，这是第二个下拉菜单，当我选择一个选项时，我需要一张图像和一些信息才能加载到同一页面的另一列中。我是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>

Answer 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>

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

1 个答案: