一旦我在同一页面的第二个下拉菜单上选择一个选项，如何防止标记到第一个下拉菜单的“div”隐藏自己

Question

我会尽力解释我所面临的问题。

基本上在同一页面上有 3 个下拉菜单 dropDownGroup1、dropDownGroup2 和 dropDownGroup3，一旦用户从例如 dropdownGroup1 中选择一个选项，就会显示一个标记为所选选项的 div。

我目前面临的问题是，每次我从其他 2 个下拉菜单中选择一个选项时，我在 dropdownGroup1 上选择时出现的 div 都会隐藏。我该如何防止这种情况发生。我尝试将它们分组，但 jquery 似乎不起作用。

$(document).ready(function() {
  $("[class^='dropDownValue']").click(function() {
    var inputValue = $(this).attr("value");
    var parents = $(this).parents(".dropDownGroup");
    var targetBox = parents.find("." + inputValue);
    parents.find('.dropdownOptions').not(targetBox).addClass('d-none');
    parents.find(targetBox).removeClass('d-none');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDownGroup1">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue1">
      <option>Select</option>
      <option value="Option1" id="01">Option1</option>
      <option value="Option2" id="02">Option2</option>
      <option value="Option3" id="03">Option3</option>
      <option value="Option4" id="04">Option4</option>
    </select>
  </div>
  <div class="Option1 dropdownOptions d-none">Option1</div>
  <div class="Option2 dropdownOptions d-none">Option2</div>
  <div class="Option3 dropdownOptions d-none">Option3</div>
  <div class="Option4 dropdownOptions d-none">Option4</div>
</div>

<div class="dropDownGroup2">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue2">
      <option>Select</option>
      <option value="Option5" id="05">Option5</option>
      <option value="Option6" id="06">Option6</option>
      <option value="Option7" id="07">Option7</option>
      <option value="Option8" id="08">Option8</option>
    </select>
  </div>
  <div class="Option5 dropdownOptions d-none">Option5</div>
  <div class="Option6 dropdownOptions d-none">Option6</div>
  <div class="Option7 dropdownOptions d-none">Option7</div>
  <div class="Option8 dropdownOptions d-none">Option8</div>
</div>

<div class="dropDownGroup3">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue3">
      <option>Select</option>
      <option value="Option9" id="09">Option5</option>
      <option value="Option10" id="10">Option6</option>
      <option value="Option11" id="11">Option7</option>
      <option value="Option12" id="12">Option8</option>
    </select>
  </div>
  <div class="Option9 dropdownOptions d-none">Option9</div>
  <div class="Option10 dropdownOptions d-none">Option10</div>
  <div class="Option11 dropdownOptions d-none">Option11</div>
  <div class="Option12 dropdownOptions d-none">Option12</div>
</div>

Answer 1

您可以使用选择框中最接近的 div，然后使用 .siblings 隐藏/仅显示值匹配的 div。

演示代码：

$(document).ready(function() {
  $("select.custom-select").change(function() {
    var inputValue = $(this).val(); //get value
    console.log(inputValue)
    var parents = $(this).closest(".form-group");
    var targetBox = parents.siblings("." + inputValue);
    parents.siblings('.dropdownOptions').not(targetBox).addClass('d-none'); //hide other siblings...
    targetBox.removeClass('d-none'); //show 
  });
});

.d-none {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="dropDownGroup1">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue1">
      <option>Select</option>
      <option value="Option1" id="01">Option1</option>
      <option value="Option2" id="02">Option2</option>
      <option value="Option3" id="03">Option3</option>
      <option value="Option4" id="04">Option4</option>
    </select>
  </div>
  <div class="Option1 dropdownOptions d-none">Option1</div>
  <div class="Option2 dropdownOptions d-none">Option2</div>
  <div class="Option3 dropdownOptions d-none">Option3</div>
  <div class="Option4 dropdownOptions d-none">Option4</div>
</div>

<div class="dropDownGroup2">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue2">
      <option>Select</option>
      <option value="Option5" id="05">Option5</option>
      <option value="Option6" id="06">Option6</option>
      <option value="Option7" id="07">Option7</option>
      <option value="Option8" id="08">Option8</option>
    </select>
  </div>
  <div class="Option5 dropdownOptions d-none">Option5</div>
  <div class="Option6 dropdownOptions d-none">Option6</div>
  <div class="Option7 dropdownOptions d-none">Option7</div>
  <div class="Option8 dropdownOptions d-none">Option8</div>
</div>

<div class="dropDownGroup3">
  <div class="form-group ">
    <label>Lorem Ipsum</label>
    <select class="custom-select dropDownValue3">
      <option>Select</option>
      <option value="Option9" id="09">Option9</option>
      <option value="Option10" id="10">Option10</option>
      <option value="Option11" id="11">Option11</option>
      <option value="Option12" id="12">Option12</option>
    </select>
  </div>
  <div class="Option9 dropdownOptions d-none">Option9</div>
  <div class="Option10 dropdownOptions d-none">Option10</div>
  <div class="Option11 dropdownOptions d-none">Option11</div>
  <div class="Option12 dropdownOptions d-none">Option12</div>
</div>