Show/hide elements based on a selected option

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!