Function onchange select only changes first element in div-CodePudding

I want to change prices via select(onchange) for different stores. Each store as a product div and products inside with different the price structures included which I want to show or hide depending on which Store you choose.

Currently, the price only changes in the first product. I think it might be a loop/array problem but nothing I have tried, works.

I do have JQuery in the page, so solutions with JQuery are fine.

 function priceStore(){
  var option = document.getElementById("Store").value;
  
      if((option=="Store1")||(option=="Store3")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'block';
          document.getElementsByClassName('price2')[0].style.display = 'none';
          document.getElementsByClassName('price3')[0].style.display = 'none';
        });
      }
      
      
      if((option=="Store2")||(option=="Store4")|| (option=="Store5")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'none';
          document.getElementsByClassName('price2')[0].style.display = 'block';
          document.getElementsByClassName('price3')[0].style.display = 'none';
        });
      }
      
      if((option=="Store6")){
        const elements = document.querySelectorAll(".product");
        elements.forEach(function (element) {
          document.getElementsByClassName('price1')[0].style.display = 'none';
          document.getElementsByClassName('price2')[0].style.display = 'none';
          document.getElementsByClassName('price3')[0].style.display = 'block';
        });
      }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data">

<select name="Store" id="Store" onchange="priceStore()"> 
<option disabled selected value="">choose store</option>
<option value="Store1">Store1</option>
<option value="Store2">Store2</option>
<option value="Store3">Store3</option>
<option value="Store4">Store3</option>
<option value="Store5">Store3</option>
<option value="Store6">Store3</option>
</select>


  <div class="productrange">
    <div class="product product1">
      <h2>Product 1</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>

    <div class="product product2">
    <h2>Product 2</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>

    <div class="product product3">
    <h2>Product 3</h2>
      <div class="price1">price1</div>
      <div class="price2">price2</div>
      <div class="price3">price3</div>
    </div>
  </div>

</form>

CodePudding user response：

UPDATE:

I little bit refactored your code, to be more dynamic, and faster:

function priceStore() {

  // Get value of selected item
  const option = document.getElementById("Store").value;

  // Here you will store index (1, 2, 3) which category you should show
  let index;

  switch (true) {
    case ["Store1", "Store3"].includes(option):
      index = 1;
      break;
    case ["Store2", "Store4", "Store5"].includes(option):
      index = 2;
      break;
    case ["Store6"].includes(option):
      index = 3;
      break;
  }

  // If no condition is met just return
  if (!index) return;

  // Get all elements having 'price' in their class name
  const elements = document.querySelectorAll(".product [class^=price]");

  // Iterate through all of them
  elements.forEach(function(element) {

    // For example: if index is 2 and current element has price2 in its class name then Show it, if not hide it
    const shouldDisplay = element.classList.contains(`price${index}`);

    // Set display property
    element.style.display = shouldDisplay ? "block" : "none";

  });

}