javascript - 在下拉选择上切换 DIV

Question

我有一个 SELECT 下拉列表，当您循环选择选项时，相应的 DIV 会显示/隐藏。

我遇到的问题是，我希望代码应用于页面上的下一个项目，而不是全局应用于整个页面。

$(document).ready(function() {
  $('#toggle-divs').on('change', function() {
    $(this).next(".div1").toggle(this.value == 2)
	$(this).next(".div2").toggle(this.value == 3)
	$(this).next(".div3").toggle(this.value == 4)
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aside">
  <select id="toggle-divs">
    <option selected="selected" value="1">Select item...</option>
    <option value="2">Item 1</option>
    <option value="3">Item 2</option>
    <option value="4">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>

Answer 1

我想这就是您正在寻找的。

我对 html 和 jquery 做了一些更改。

在 html 中，我从“选择项目...”选项中删除了值，如果他们选择该选项，您不希望它发送值。然后我从其他中减去1。

更改后，我隐藏了所有 div，下一行仅显示在下拉列表中选择的 div。

编辑

我刚刚注意到你有 2 个带有“aside”类的 div，也许最好为第二个 div 分配一个 id 以使其唯一。我添加了“aside_content”的 id 并适当修改了 jquery。

编辑2

修改了 jquery 以考虑页面上此代码段的多个实例。我将下拉列表的父项与类一起使用，然后获取下一个带有类的 div，并在该 div 上执行与之前相同的逻辑。

$(document).ready(function() {
  $('.toggle-divs').on('change', function() {
    var nextAside = $(this).parent('.aside').next('.aside');
    nextAside.find("div").hide();
    nextAside.find(".div" + this.value).show()
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aside">
  <select class="toggle-divs">
    <option selected="selected" value="">Select item...</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>
<!-- Second Instace -->
<div class="aside">
  <select class="toggle-divs">
    <option selected="selected" value="">Select item...</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>