html - Show/hide elements based on a selected option with javascript

Question

I'm currently working on a website (I'm new to HTML, CSS, JavaScript and I haven't worked with JQuery) and I made a form in which users can select the type of candy they want from a list:

<form class="form-horizontal" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="selectCandy" class="control-label col-sm-0"></label>
            <div class="col-sm-4">
                <select class="form-control" id="selectC">
                    <option id="candy1" onclick="document.getElementById('noCandy1').style.display='block'; return false;">Lollipop</option>
                    <option id="candy2" onclick="document.getElementById('noCandy2').style.display='block'; return false;">Haribo Gummies</option>
                    <option id="candy3" onclick="document.getElementById('noCandy3').style.display='block'; return false;">Gum</option>
                </select>
            </div>

The idea is that when they select the type of candy, a new form will appear, allowing them to choose the amount of candy they want. The amount of candy they can select is different depending on the product. For instance, if the choose 'Lollipop' they can select from 1 to 6; if they choose Haribo, they can only select from 1 to 2. Here's the code for that:

<div id="noCandy1">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            </select>
        </div>
<div id="noCandy2">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            </select>
        </div>
<div id="noCandy3">
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            </select>
        </div>

As I stated before, I'm new to all of this, and I'm not sure if I should add some JavaScript or if it would be possible to do this by using CSS. My problem is that the divs that are supposed to appear when an option is chosen are displayed all the time. What can I do for a div to appear only when one of the options of the previous form is selected? Thank you very much!

Answer 1

Here's one way do accomplish what you're after

// Function to add event listener to table
var el = document.getElementById("selectC");
el.addEventListener("change", function() {
  var elems = document.querySelectorAll('#noCandy1,#noCandy2,#noCandy3')
  for (var i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none'
  }
  if (this.selectedIndex === 0) {
    document.querySelector('#noCandy1').style.display = 'block';
  } else if (this.selectedIndex === 1) {
    document.querySelector('#noCandy2').style.display = 'block';
  }else if (this.selectedIndex === 2) {
    document.querySelector('#noCandy3').style.display = 'block';
  }
}, false);

#noCandy1,#noCandy2,#noCandy3 {
  display:none;
}

<form class="form-horizontal" method="POST" enctype="multipart/form-data">
  <div class="form-group">
    <label for="selectCandy" class="control-label col-sm-0"></label>
    <div class="col-sm-4">
      <select class="form-control" id="selectC">
        <option id="candy1">Lollipop</option>
        <option id="candy2">Haribo Gummies</option>
        <option id="candy3">Gum</option>
      </select>
    </div>
  </div>
</form>
<div id="noCandy1">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select>
</div>
<div id="noCandy2">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
  </select>
</div>
<div id="noCandy3">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>