On change of dropdown options, ALL dropdowns are changing

user_609630 0
Viewed 47

I have the following code that is taking the value of the first dropdown option and showing the corresponding second dropdown (so prod-select links to prod-var).

This initially worked fine but I've now had to add a second lot of dropdowns (see the second prod-group div).

The problem I have is when I change the options in the first prod-group div, they also change the second prod-group, how can I get around that?

$('select[class*="var-"]').hide();
$('.prod-select').on('change', function() {
  $('select[class*="var-"]').hide(); //hide all select
  $(".var-" + this.value).show(); //show 
});
$('.prod-select').trigger('change') //trigger on page load

Then the HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prod-group">
  <select class="prod-select" name="product_cat">
    <option value="1">
      A
    </option>
    <option value="2">
      B
    </option>
  </select>

  <select class="var-1" name="product_var">
    <option value="">
      var 1
    </option>
  </select>
  <select class="var-2" name="product_var">
    <option value="">
      var 2
    </option>
  </select>
</div>

<div class="prod-group">
  <select class="prod-select" name="product_cat">
    <option value="1">
      A
    </option>
    <option value="2">
      B
    </option>
  </select>

  <select class="var-1" name="product_var">
    <option value="">
      var 1
    </option>
  </select>
  <select class="var-2" name="product_var">
    <option value="">
      var 2
    </option>
  </select>
</div>

https://jsfiddle.net/dx29Lfo8/

jquery
2 Answers

In your code you are targetting all select-box instead you can use $(this).siblings("selectbox..") to target only select which is required.

Demo Code :

$('select[class*="var-"]').hide();
$('.prod-select').on('change', function() {
  $(this).siblings('select[class*="var-"]').hide();
  $(this).siblings(".var-" + this.value).show();
});
$('.prod-select').trigger('change')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prod-group">
  <select class="prod-select" name="product_cat">
    <option value="1">
      A
    </option>
    <option value="2">
      B
    </option>
  </select>

  <select class="var-1" name="product_var">
    <option value="">
      var 1
    </option>
  </select>
  <select class="var-2" name="product_var">
    <option value="">
      var 2
    </option>
  </select>
</div>

<div class="prod-group">
  <select class="prod-select" name="product_cat">
    <option value="1">
      A
    </option>
    <option value="2">
      B
    </option>
  </select>

  <select class="var-1" name="product_var">
    <option value="">
      var 1
    </option>
  </select>
  <select class="var-2" name="product_var">
    <option value="">
      var 2
    </option>
  </select>
</div>

user_106064000

One option would be to use a combination of closest and find, siblings would be quicker but could fail if the elements you want to hide ever become nested, with this approach it will move to the parent div then search all decendants for the elements to hide:

$('.prod-select').on('change', function() {
     const $parentDiv = $(this).closest('.prod-group'); //Get the parent div
     $parentDiv.find('select[class*="var-"]').hide(); //hide
     $parentDiv.find(".var-" + this.value).show(); //show 
});
user_48301960
Related