在下拉选择中切换DIV

Question

我有一个SELECT下拉列表，当您在OPTIONS中循环时，会显示/隐藏相应的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和下一行我只是显示在下拉列表中选择的那个。

修改

我只是注意到你有2个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>

Answer 2

为了保留选择值并避免隐藏所有元素，我建议：

＆＃13;

＆＃13;

.slugignore

＆＃13;

$(function () {
  $('#toggle-divs').on('change', function() {
    // toogle on only selected one
    $(".aside .div" + (+this.value - 1)).toggle(true);
    
    // toggle off only the unseleted and visible
    $(".aside > div:not('.div" + (+this.value - 1) + "'):visible").toggle(false);
  });
});

＆＃13;

＆＃13;

＆＃13;