Выбор элемента изи списка
 

Привет!!!

<div>
<select name="Select Product" id="">
<option value="">--Please choose an option--</option>
<option value="">Advanced Salmon</option>
<option value="">Apple Cider</option>
<option value="">Aple Pie</option>
<option value="">Appreciation Baguatte</option>
</select>
</div>

Как сделать, чтобы при выборе продукта из списка открывалось в div, как на втором рис., составные части продукта?

А где и как заданы эти составные части для каждого продукта? В какой то БД на сервере или просто в какой то таблиц, заданной массивом в js или заранее прописаны где то в html?

Что-то нечто такого можно сделать...

<style>
* {
  font-size: 20px;
  padding: 2px;
}
</style>
<select name="country" id="country">
  <option value="bra" selected>Бразилия</option>
  <option value="rus">Россия</option>
  <option value="ind">Индия</option>
  <option value="chn">Китай</option>
  <option value="zaf">ЮАР</option>
</select>
<select name="city" id="city">
</select>
<script>
const cities = {
  bra: ["Сан-Паулу", "Рио-де-Жанейро"],
  rus: ["Москва", "Санкт-Петербург"],
  ind: ["Мумбаи", "Дели"],
  chn: ["Шанхай", "Пекин"],
  zaf: ["Йоханнесбург", "Кейптаун"]  
};
const country = document.getElementById("country");
const city = document.querySelector("#city");
window.onload = selectCountry;
country.onchange = selectCountry;
selectCountry()

function selectCountry(ev){
  city.innerHTML = "";
  const c = this.value || "bra"
  for(let i = 0; i < cities[c].length; i++){
    const o = new Option(cities[c][i], i, false, false);
    city.add(o);
  };
}
</script>