关于下拉选项的变化，所有的下拉列表都在发生变化。

Question

我有下面的代码，它接受第一个下拉选项的值，并显示相应的第二个下拉列表(所以prod-select链接到prod-var)。

这最初运行良好，但我现在不得不添加第二个大量下降(见第二个)。

我遇到的问题是，当我在第一个prod-group div中更改选项时，它们也改变了第二个prod-group，我如何才能绕过它呢？

$('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

然后是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/

Answer 1

在您的代码中，您将获取所有的选择框，相反，您可以使用$(this).siblings("selectbox..")只针对所需的选择。

演示代码：

​

$('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>

​

Answer 2

一种选择是将closest和find结合使用，siblings会更快，但如果您想隐藏的元素被嵌套，siblings可能会失败，使用这种方法，它将移动到父div，然后搜索所有的附件以寻找要隐藏的元素：

$('.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 
});