Show element depending on select value

Question

I have a question about how to get a var and then show his specific div. In the exemple, if I select C then Juice, menu 1 need to appear. The problem is, I have no idea how to get the var and then simply make the dive appear. When I select an other ingredient, like A then Tea, menu-1 need to hidde and menu-2 must appear.

Thanks for your help.

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

function changecat(value) {
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (categoryId in mealsByCategory[value]) {
      catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
    }
    document.getElementById("category").innerHTML = catOptions;
  }
}

var Juice = this.id;
$('menu-1' + id).css({
  "display": "inline-block"
});

.menu-1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="meal" id="meal" onChange="changecat(this.value);">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="menu-1">menu 1</div>

JS Fiddle

Answer 1

This is one way of achieving it.

Note that I have added only one rule (one that you have specified in your question) so the only functionality of this code (apart from populationg second select with new options) is that when you select A and then Tea, menu1 hides and menu2 appears.

If you want another rules (which you probably do), then you can specify them the same way I did with if (selectEl1.value === 'A' && selectEl2.value === 'Tea').

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

const menuEl = document.querySelector('.menu');
const selectEl1 = document.querySelector('#meal');
const selectEl2 = document.querySelector('#category')

selectEl1.addEventListener('change', event => {
  const meals = mealsByCategory[selectEl1.value]

  // clear the content of the second select and populate it with new options
  selectEl2.innerHTML = '';
  meals.forEach(item => {
    const option = document.createElement('option');
    selectEl2.appendChild(option);
    option.textContent = item;
  });
});

selectEl2.addEventListener('change', event => {
  if (selectEl1.value === 'A' && selectEl2.value === 'Tea') {
    document.querySelector('.menu1').style.display = 'none';
    document.querySelector('.menu2').style.display = 'block';
  }
});

.menu2 {
  display: none;
}

<select name="meal" id="meal">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="menu1">Menu 1</div>
<div class="menu2">Menu 2</div>

UPDATE (based on provided fiddle)

const CityByCategory = {
    A: ["NY-District-1", "NY-District-2", "NY-District-3"],
    B: ["LA-District-1", "LA-District-2", "LA-District-3"],
    C: ["SF-District-1", "SF-District-2", "SF-District-3"]
}

const clearContent = () => {
  const allDistricts = document.querySelectorAll('.district');
  allDistricts.forEach(item => {
    item.style.display = 'none';
  });
}

const citySelect = document.querySelector('#city');
const categorySelect = document.querySelector('#category')

citySelect.addEventListener('change', event => {
  clearContent();
  const districts = CityByCategory[citySelect.value];
  document.querySelector('.' + districts[0]).style.display = 'block';

  categorySelect.innerHTML = '';
  districts.forEach(item => {
    const option = document.createElement('option');
    categorySelect.appendChild(option);
    option.textContent = item;
  });
});

categorySelect.addEventListener('change', event => {
  clearContent();
  const selected = categorySelect.value;
  const district = document.querySelector('.' + selected);

  if (district) { district.style.display = 'block'; }
});

[class*="NY"] {
    display:none;
}
[class*="SF"] {
    display:none;
}
[class*="LA"] {
    display:none;
}

<select name="city" id="city">
  <option value="" disabled selected>Select</option>
  <option value="A">NY</option>
  <option value="B">LA</option>
  <option value="C">SF</option>
</select>
<select name="category" id="category">
  <option value="" disabled selected>Select</option>
</select>
<div class="NY-District-1 district">NY-District-1-Adress-1</div>
<div class="NY-District-2 district">NY-District-1-Adress-2</div>
<div class="LA-District-1 district">LA-District-1-Adress-1</div>
<div class="LA-District-2 district">LA-District-1-Adress-2</div>
<div class="SF-District-1 district">SF-District-1-Adress-1</div>
<div class="SF-District-2 district">SF-District-1-Adress-2</div>