Trying to display/hide number of divs from select option

Question

I am currently working on a e-commerce project.

One of the options the user has is the amount of products that can be displayed per page from a drop down select option.

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?

The code I have so far is shown below.

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 < currentVal; i++) {
    divs[i].style.display = "initial";
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>How many products would you like listed per page?</p>
<select id="choice">
  <option value="0"></option> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option> 
  <option value="5">5</option> 
</select>

<div id="results">
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
</div>

Answer 1

First you have to attach the chnage event to the select, then on every change you could use .slice(0,currentVal) to select the first X elements and finally toggle the display with the help of the show()/hide() functions like :

$('#choice').on('change', function() {
  var currentVal = $(this).val();
  var sections  = $('.section');

  if (currentVal == 0) {
    sections.show();
  } else {
    sections.hide().slice(0, currentVal).show();
  }
});

NOTE : You don't need to use the both mixed vanillaJS and jQuery, just stick with one of them.

Hope this helps.

$('#choice').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 0) {
    $('.section').show();
  } else {
    $('.section').hide().slice(0, currentVal).show();
  }
})

.section {
  width: 200px;
  height: 40px;
  background-color: green;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>How many products would you like listed per page?</p>
<select id="choice">
  <option value="0"></option> 
  <option value="1">1</option> 
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option> 
  <option value="5">5</option> 
</select>

<div id="results">
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
  <div class="section">This is a regular div</div>
</div>