title: Trying to display/hide number of divs from select option
body: <p>I am currently working on a e-commerce project. </p>
  
  <p>One of the options the user has is the amount of products that can be displayed per page from a drop down select option.</p>
  
  <p>I am a little unsure on how to go about removing the number of divs on display if the user selects less options to display after a larger number has already been selected. So basically, at this stage, I can increment the number of divs to appear as the number is going higher, but what I cant figure out is how to reset the divs back to css display: none, and then display them based on the lesser number selected. The way I am going about it is not working. Any suggesstions?</p>
  
  <p>The code I have so far is shown below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var choices = document.getElementById("choice");
  var divs = document.querySelectorAll(".section");
  var btn = document.getElementById("button");
  var numOfItems = document.getElementById("results");
  var currentVal = 0;
  
  choices.addEventListener("change", function() {
    $(".section").css("display", "none");
    currentVal = choices.options[choices.selectedIndex].value;
    for (var i = 0; i &lt; currentVal; i++) {
      divs[i].style.display = "initial";
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;p&gt;How many products would you like listed per page?&lt;/p&gt;
  &lt;select id="choice"&gt;
    &lt;option value="0"&gt;&lt;/option&gt; 
    &lt;option value="1"&gt;1&lt;/option&gt; 
    &lt;option value="2"&gt;2&lt;/option&gt; 
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt; 
    &lt;option value="5"&gt;5&lt;/option&gt; 
  &lt;/select&gt;
  
  &lt;div id="results"&gt;
    &lt;div class="section"&gt;This is a regular div&lt;/div&gt;
    &lt;div class="section"&gt;This is a regular div&lt;/div&gt;
    &lt;div class="section"&gt;This is a regular div&lt;/div&gt;
    &lt;div class="section"&gt;This is a regular div&lt;/div&gt;
    &lt;div class="section"&gt;This is a regular div&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>