jquery - 使用 jQuery 通过 Select 显示/隐藏多个 DIV

Question

我基本上和很多其他人有同样的情况。

通过在 Google 内进行广泛的搜索，我找到了几种不同的方法，人们声称他们的方法有效。我还没有让任何一个正常工作。我对 jQuery 的了解还不够，无法完全理解如何从头开始编写此代码，因此我现在依赖于非常好的示例。

我一直在尝试使用的内容(基于我发现并尝试过的示例)是:

<script type="text/javascript">
    $(document).ready(function() {
        ('.box').hide();
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

注意:我在 html 周围使用括号而不是小于和大于符号，以便在此消息中正确显示。 当我测试这个时我得到什么:

首次加载时未选择任何内容 => 不显示 DIV。

当我选择 DIV 区域 1 => 显示 DIV 区域 2 和 3。

当我选择 DIV 区域 2 => 显示 DIV 区域 1 和 3。

当我选择 DIV 区域 3 => 显示 DIV 区域 1 和 2。

我这一天脑子都炸了。我可以做什么来解决这个问题？

Answer 1

请注意，您在 JS 代码中缺少对 jQuery 的 $ 引用。我假设这只是问题中的一个拼写错误。

实现此目的的最简单方法是在选择更改时show()所有div，然后使用所选值隐藏相关的单个div它的id。像这样的事情:

$(document).ready(function() {
  $('#dropdown').change(function() {
    $('.box').show().filter('#div' + $(this).val()).hide();
  });
});

.box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dropdown" name="dropdown">
    <option value="0">Choose</option>
    <option value="area1">DIV Area 1</option>
    <option value="area2">DIV Area 2</option>
    <option value="area3">DIV Area 3</option>
  </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>