Выпадающий список загружает изображение, а другое раскрывающееся меню загружает информацию о другом столбце

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>