CODEWITHSUNDEEP
javascriptjquery
Thom-pouce-dev
Thom-pouce-dev

Reputation: 77

Show element depending on select value

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

Upvotes: 3

Views: 822

Answers (3)

Matus Dubrava
Matus Dubrava

Reputation: 14462

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>

Upvotes: 2

Takit Isy
Takit Isy

Reputation: 10081

It is unclear for me what you asked, but anyway…
Here is a snippet where I tried to optimize your code and I propose something that could be what you wanted:

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

// Code on change of 1st select
$('#meal').on('change', function() {

  // Get the selected value of the 1st select
  var value = $(this).val();
  
  // Populate options of 2nd select
  var catOptions = "<option value='' disabled selected>Select</option>";
  for (categoryId in mealsByCategory[value]) {
    catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
  }
  $("#category").html(catOptions);
  
});

// Code on change of 2nd select (proposition, don't get what you really want)
$('#category').on('change', function() {
  var index = $("#category option:selected").index();
  $('.menus').hide();
  $('.menu-' + index).show();
});
.menus {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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="menus menu-1">menu 1</div>
<div class="menus menu-2">menu 2</div>
<div class="menus menu-3">menu 3</div>
<div class="menus menu-4">menu 4</div>
<div class="menus menu-5">menu 5</div>

Feel free to comment for any modification or to explain me the way you want it!

Hope it helps.

Upvotes: 1

treyBake
treyBake

Reputation: 6560

you can use .find() and :selected like this:

var selected_value = $('#my-select').find('option:selected');

if (selected_value === 'C') {
    $('#target').removeClass('hidden')
}

refs:

https://api.jquery.com/find/

https://api.jquery.com/selected-selector/

note: this isn't going to work via copy-and-paste you will have to amend for your script. This is just the core principle :)

Upvotes: 1

Related Questions